三个JS：在Mesh对象上添加两种材质

Question

在 ThreeJS 中，可以将多个 material 添加到 Object3D/Mesh according to its documentation。我们可以使用单个 Material 或使用 Material:

的数组

网格打字稿文件class 声明和构造器（来自 ThreeJS src 代码）：

export class Mesh<
    TGeometry extends BufferGeometry = BufferGeometry,
    TMaterial extends Material | Material[] = Material | Material[] // ### Here: Material[] ###
> extends Object3D {
    constructor(geometry?: TGeometry, material?: TMaterial);

这是我的问题，我似乎无法解决... 当我使用单个 Material 时，显示我的 Mesh。 但是，当我使用两个material作为数组时，我的Mesh不会显示。我在渲染场景时也没有在控制台中打印出任何错误。

我的最终目标是能够将对象的内部和外部分开 material。

这是我的代码：

export function init(radius: number = 18.0, innerColor: number = 0xFFFFFF, outerColor: number = 0x444444) {
    var obj = new Object3D();
    loader.load(
        objPath, 
        function(object){
            obj = object;
            const mesh = obj.children[0] as Mesh;
            // WORKING:
            mesh.material = new MeshPhongMaterial({color: outerColor});
            // NOT WORKING: Using two materials
            // mesh.material = new Array<Material>(new MeshPhongMaterial({color: outerColor}), new MeshPhongMaterial({color:innerColor}));
            mesh.scale.setLength(radius)
            scene.add(mesh);
        },
        function (error){
            console.log(error)
        }
    );
}

为什么我在使用两个 material 时看不到我的对象？

我知道在以前的版本中有 MeshFaceMaterial 并且构造函数的 material 数组接受在某些意义上应该是它的替代品。

ThreeJS version: r128

如有任何帮助，我们将不胜感激！

Answer 1

最简单的方法是克隆您的网格并分配两种单独的材质，一种用于内部，另一种用于外部：

const meshOuter = obj.children[0] as THREE.Mesh;
const meshInner = meshOuter.clone();

// Outer mesh shows front side
meshOuter.material = new THREE.MeshPhongMaterial({
    color: outerColor,
    side: THREE.FrontSide
});
// Inner mesh shows back side
meshInner.material = new THREE.MeshPhongMaterial({
    color: innerColor,
    side: THREE.BackSide
});

// Scale inner mesh down just a bit to avoid z-fighting
meshInner.scale.multiplyScalar(0.99);

三个JS：在Mesh对象上添加两种材质

ThreeJS: Add Two Materials on an Mesh Object

javascript

typescript

three.js

webgl

为什么我在使用两个 material 时看不到我的对象？