2

家のジオメトリを作成し、ジオメトリの面にさまざまなテクスチャをアタッチしようとしています。私はを使用してr55います。問題は、テクスチャから作成されたマテリアルのある面が表示されないことです。ただし、単純なカラーマテリアルの面は表示されます。自分roofTextureで生成したマテリアルを単純なカラーマテリアルに置き換えると、そのマテリアルを使用している面も正しく表示されます。

これが私のコードの関連部分です：

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);

私は何が間違っているのですか？

4

1 に答える 1

2

ジオメトリに UV 座標がありません。UV 座標は 0 から 1 になるため、ジオメトリを自分で作成しているため、左下隅の UV (0.0, 0.0) を右下 (1.0, 0.0)、左上 (0.0, 1.0)、右上 ( 1.0、1.0)。PlaneGeometry.js ファイルを見て、UV がどのように割り当てられているかを確認できます。

于 2013-02-05T21:24:44.413 に答える