MorphMe Part I

Description

In this exercise, there is a given set of positions and at a certain time interval our objects will change to different positions based on the set given. The objects will be obtained from user geometry and material input. The set of positions will be formatted as an array with arrays of vector3 values.

Tutorial

This exercise takes on a similar concept as our GRID 1D exercise. We will be laying down objects in the scene in a single loop, the difference is the positions of the objects is given by our getCoords() function.

This function has a single array with 11 structures and each structure has 20 arrays of x, y & z coordinates. The getCoords function uses a .map() method that turns the coordinates into Vector3 objects.

//This function returns an array with arrays of vectors

    getCoords() {
        return [...
          ].map(coords => coords.map(xyz => new THREE.Vector3(...xyz) ) );
        //The .map turning the nested arrays to Vector3 objects
        // [x,y,z] > new Vector3(x,y,z)
    }

In our start function, we then set a global variable with the coordinates of a single structure. We also declare the global time and global time interval (timeGlobalWait).

this.time = 0;
this.timeGlobalWait = 3;
this.constellations = this.getCoords();
this.constInd=1;
this.positions = this.constellations[this.constInd];

Now we saved our user’s geometry and material input as a constant. We also declare a count for our loop; we will use 20 here since there are 20 Vector3 objects. We also declare a global array as items, and this will store an object containing the mesh.

We, then, do a single loop ‘this.count’ times and within the loop we create a new mesh and set its position corresponding with our array of Vector3 objects. We also add that mesh to our global array, items, and we add the mesh to the scene.

this.objMats.push( factoryMat.build({ base:this.scene.baseMat, def:this.scene.defaultMat, asset:pattMat.getNext()}) );
        }
        
         for(let i = 0; i<this.count; i++){
            
            let obj = new THREE.Mesh(this.objGeoms[i%this.objGeoms.length], this.objMats[i%this.objMats.length]);
            
            obj.position.copy(this.positions[i]);
            obj.scale.set(0.1,0.1,0.1);
            this.items.push({
                obj
                });
            this.cont3D.add(obj);


        }