挤压形状背面和正面的不同材料 [英] Different material on back and frontside of extruded shape

问题描述

我试图在挤压形状的正面和背面应用不同的材料，但不知道将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 挤压设置 = {数量:10，斜角启用:假，斜面厚度:0.2，斜角尺寸:0.2，bevelSegments: 8,材料:0，挤出材料:1};var geometry = new THREE.ExtrudeGeometry(shapes,extrudeSettings);var 材料 = [materialFront, materialSide];var material = new THREE.MeshFaceMaterial(material);mesh = new THREE.Mesh(geometry, material);

<小时>

更新:根据 WestLangley 的评论，我成功地为背面添加了不同的纹理:

<前>//...var 材料 = [materialFront，materialSide，materialBack];//...for (在mesh.geometry.faces中的var face){if (mesh.geometry.faces[ face ].normal.z == 1) mesh.geometry.faces[ face ].materialIndex = 2;}

解决方案

在创建网格几何体之后，在第一次调用到 render() 之前，您有将背面的 materialIndex 更改为 2.然后，在您的材料阵列中添加第三种材料.

您可以通过面部法线识别背面.几何体背面的面的面法线应全部指向同一方向.

three.js r.58

I'm trying to apply different material on front and back sides of extruded shape, but cannot figure out where to put side: THREE.FrontSide and side: THREE.BackSide. Where they should be putted?

My relevant code part is:

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

---

UPDATE: According to WestLangley's comment I succeeded in adding the different texture to backfaces:

// ...
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;
}

解决方案

After you create your mesh geometry, and before the first call to render(), you have to change the materialIndex to 2 for the back faces. Then, add a third material in your material array.

You can identify the back faces by their face normals. Face normals for faces on the back of the geometry should all point in the same direction.

three.js r.58

这篇关于挤压形状背面和正面的不同材料的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！