How to create a dynamic grid with normal and UV in three .js?

Question

I know how to dynamically create a grid in a three.js file, but it's unclear how to add custom UVs and normals to the grid. here's how to create a custom mesh, how can we programmatically add UVs and normals to this mesh?

thanks!

var imgTexture = THREE.ImageUtils.loadTexture(image); var avatarGeom = new THREE.Geometry(); avatarGeom.vertices.push(new THREE.Vector3(0.895813,0.732893,0)); avatarGeom.vertices.push(new THREE.Vector3(-1.007173,0.732893,0)); avatarGeom.vertices.push(new THREE.Vector3(0.895813,-1.390674,0)); avatarGeom.vertices.push(new THREE.Vector3(-1.007173,-1.390674,0)); var face = new THREE.Face3(2,3,1); avatarGeom.faces.push(face); face = new THREE.Face3(0,2,1); avatarGeom.faces.push(face); var avatar = new THREE.Mesh(avatarGeom,new THREE.MeshLambertMaterial(imgTexture)); avatar.doubleSided = true; scene.add(avatar); 

Answer 1

Normal is in face . UV rays go in geometry .

 var imgTexture = THREE.ImageUtils.loadTexture(image); var avatarGeom = new THREE.Geometry(); avatarGeom.vertices.push(new THREE.Vector3(0.895813,0.732893,0)); avatarGeom.vertices.push(new THREE.Vector3(-1.007173,0.732893,0)); avatarGeom.vertices.push(new THREE.Vector3(0.895813,-1.390674,0)); avatarGeom.vertices.push(new THREE.Vector3(-1.007173,-1.390674,0)); var face = new THREE.Face3(2,3,1); face.normal.set(0,0,1); // normal avatarGeom.faces.push(face); avatarGeom.faceVertexUvs[0].push([new THREE.UV(1,1),new THREE.UV(0,1),new THREE.UV(1,0)]); // uvs face = new THREE.Face3(0,2,1); face.normal.set(0,0,1); // normal avatarGeom.faces.push(face); avatarGeom.faceVertexUvs[0].push([new THREE.UV(0,0),new THREE.UV(1,1),new THREE.UV(1,0)]); // uvs var avatar = new THREE.Mesh(avatarGeom,new THREE.MeshLambertMaterial(imgTexture)); avatar.doubleSided = true; scene.add(avatar); 

The reason UVs goes in geometry is because we can have different channels this way (different sets of UVs for the same geometry).