Javascript 具有自定义几何体的网格的Three.js纹理
我正在尝试创建房屋几何体,并将不同的纹理附着到几何体的面上。我正在使用Javascript 具有自定义几何体的网格的Three.js纹理,javascript,three.js,textures,Javascript,Three.js,Textures,我正在尝试创建房屋几何体,并将不同的纹理附着到几何体的面上。我正在使用r55。问题是,使用从纹理创建的材质的面不会出现。但是,使用简单颜色材质的面不会出现。如果使用简单的颜色材质替换从我的屋顶纹理生成的材质,则使用该材质的面也会正确显示 以下是我的代码的相关部分: var geom = new THREE.Geometry(); // Load the roof texture var roofTexture = new THREE.ImageUtils.loadTexture('gfx/te
r55
。问题是,使用从纹理创建的材质的面不会出现。但是,使用简单颜色材质的面不会出现。如果使用简单的颜色材质替换从我的屋顶纹理生成的材质,则使用该材质的面也会正确显示
以下是我的代码的相关部分:
var geom = new THREE.Geometry();
// Load the roof texture
var roofTexture = new THREE.ImageUtils.loadTexture('gfx/textures/roof.jpg');
// Let the roof texture repeat itself
roofTexture.wrapS = roofTexture.wrapT = THREE.RepeatWrapping;
roofTexture.repeat.set(10, 10);
// Materials
var materialArray = [];
materialArray.push(new THREE.MeshLambertMaterial({color: 0xD3E3F0 }));
materialArray.push(new THREE.MeshLambertMaterial({map: roofTexture}));
// Base edges
var edge0 = new THREE.Vector2(obj.ridgeLength/2, -obj.buildingDepth/2);
var edge1 = new THREE.Vector2(obj.ridgeLength/2, obj.buildingDepth/2);
var edge2 = new THREE.Vector2(-obj.ridgeLength/2, obj.buildingDepth/2);
var edge3 = new THREE.Vector2(-obj.ridgeLength/2, -obj.buildingDepth/2);
// Floor
geom.vertices.push(new THREE.Vector3(edge0.x, -1, edge0.y));
geom.vertices.push(new THREE.Vector3(edge1.x, -1, edge1.y));
geom.vertices.push(new THREE.Vector3(edge2.x, -1, edge2.y));
geom.vertices.push(new THREE.Vector3(edge3.x, -1, edge3.y));
// Eave
geom.vertices.push(new THREE.Vector3(edge0.x, obj.eaveHeight, edge0.y));
geom.vertices.push(new THREE.Vector3(edge1.x, obj.eaveHeight, edge1.y));
geom.vertices.push(new THREE.Vector3(edge2.x, obj.eaveHeight, edge2.y));
geom.vertices.push(new THREE.Vector3(edge3.x, obj.eaveHeight, edge3.y));
// Ridge
geom.vertices.push(new THREE.Vector3(obj.ridgeLength/2, obj.ridgeHeight, 0));
geom.vertices.push(new THREE.Vector3(-obj.ridgeLength/2, obj.ridgeHeight, 0));
// Ground
geom.faces.push( new THREE.Face4(0, 0, 0, 0) );
// Front
geom.faces.push( new THREE.Face4(0, 3, 7, 4) );
// Left side
geom.faces.push( new THREE.Face4(0, 4, 5, 1) );
// Back
geom.faces.push( new THREE.Face4(1, 5, 6, 2) );
// Right side
geom.faces.push( new THREE.Face4(2, 6, 7, 3) );
// Left triangle
geom.faces.push( new THREE.Face3(4, 8, 5));
// Right triangle
geom.faces.push( new THREE.Face3(6, 9, 7));
// Front roof
geom.faces.push( new THREE.Face4(7, 9, 8, 4) );
// Back roof
geom.faces.push( new THREE.Face4(5, 8, 9, 6) );
// Assign materials to the faces
geom.faces[0].materialIndex = 0;
geom.faces[1].materialIndex = 0;
geom.faces[2].materialIndex = 0;
geom.faces[3].materialIndex = 0;
geom.faces[4].materialIndex = 0;
geom.faces[5].materialIndex = 0;
geom.faces[6].materialIndex = 0;
geom.faces[7].materialIndex = 1;
geom.faces[8].materialIndex = 1;
geom.computeFaceNormals();
obj.house = new THREE.Mesh( geom, new THREE.MeshFaceMaterial(materialArray) );
obj.house.doubleSided = true;
obj.house.castShadow = true;
obj.sun.shadowDarkness = 1.0;
obj.scene.add(obj.house);
我做错了什么?几何体上缺少UV坐标。UV坐标从0到1,因此,由于您自己创建几何体,因此可以在左下角指定右下角(1.0,0.0)、左上角(0.0,1.0)和右上角(1.0,1.0)上的UV(0.0,0.0)。您可以查看PlaneGeometry.js文件以了解UV是如何分配的 对于那些寻找语法的人来说,它是:geom.faceVertexUvs[0].push([new THREE.Vector2(0,0),new THREE.Vector2(0,1),new THREE.Vector2(1,1)]代码>。这将为第一个面的三个顶点指定uv坐标(0,0)、(0,1)、(1,1)。要将uv指定给下一个面,请执行geom.faceVertexUvs[0]。按(…)代码>。嗨,我还在三个js中创建一个车库。我必须在外墙和内壁上应用不同的纹理。该方法与您类似,创建顶点并向几何体添加面,但一个纹理应用于所有墙,如果我为材质提供一个数组,则该方法无效,甚至连墙都不可见。你找到解决办法了吗?