Question

我正在尝试在挤压形状的正面和背面应用不同的材质，但无法确定放置side: THREE.FrontSide和side: THREE.BackSide的位置。应该把它们推到哪里？

我的相关代码部分是：

var materialFront = new THREE.MeshPhongMaterial({ ambient: 0xffffff, map: frontTexture });

var materialSide = new THREE.MeshPhongMaterial({color: 0xE68A00, ambient: 0xffffff});

var extrusionSettings = {
          amount: 10,
          bevelEnabled: false,
          bevelThickness: 0.2,
          bevelSize: 0.2,
          bevelSegments: 8,
          material: 0,
          extrudeMaterial: 1
};

var geometry = new THREE.ExtrudeGeometry(shapes, extrusionSettings);

var materials = [materialFront, materialSide];

var material = new THREE.MeshFaceMaterial(materials);

mesh = new THREE.Mesh(geometry, material);

更新：根据WestLangley的评论，我成功地将不同的纹理添加到背面：

// ...
var materials = [materialFront, materialSide, materialBack];
// ...
for ( var face in mesh.geometry.faces ) {
if (mesh.geometry.faces[ face ].normal.z == 1) mesh.geometry.faces[ face ].materialIndex = 2;
}

Answer 1

创建网格几何体后，在第一次调用之前到render()，您必须将背面的materialIndex更改为2。然后，在材质数组中添加第三种材质。

您可以按脸部法线识别背面。几何体背面的面的法线应该都指向相同的方向。

three.js r.58

Answer 2

尝试使用：

var materialFront = new THREE.MeshPhongMaterial({ ambient: 0xffffff, map: frontTexture, side: THREE.FrontSide });
var materialSide = new THREE.MeshPhongMaterial({ color: 0xE68A00, ambient: 0xffffff, side: THREE.BackSide });

即使您应该降低环境贡献并向FrontSide材质提供color。

然后：

var materials = [materialFront, materialSide];
scene.add( THREE.SceneUtils.createMultiMaterialObject( geometry, materials ));

挤压形状背面和正面的不同材料

2 个答案: