首页 文章

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

提问于
浏览 次
9

我正在尝试在挤压形状的正面和背面应用不同的材料，但无法弄清楚放在哪里 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;
}
three.js

2 回答

  • 7

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

    您可以通过面法线识别背面 . 几何体背面的面的法线应该都指向相同的方向 .

    three.js r.58

    回复于
  • 1

    尝试使用：

    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 ));
    回复于

相关问题