javascript - 在 threejs 中使用纹理网格和线框网格

Question

我试图在 threeJS 中绘制线框网格和纹理网格，但是当我将两者都添加到我的场景时，纹理网格不显示。代码如下:

我在创建两个共享相同几何体的网格时遇到问题，其中一种 Material 是线框，另一种是纹理。如果其中一种 Material 是线框，而另一种只是颜色填充，则效果很好 - 但一旦我将第二种 Material 设为纹理，它就会停止工作。

如果我注释掉 scene.add(wireMesh);，那么纹理网格就会出现。

var wireMat =  new THREE.MeshBasicMaterial( { color:0x00FFFF, wireframe: true,                 transparent: true, overdraw:true } );
var wireMesh = new THREE.Mesh(geometry, wireMat);
scene.add( wireMesh );

var texture = texture = THREE.ImageUtils.loadTexture( 'textures/world.jpg' );

var imageMat = new THREE.MeshBasicMaterial( {color:0xffffff, map: texture } );

var fillMesh = new THREE.Mesh(geometry, imageMat);
scene.add( fillMesh );

Answer 1

在 SceneUtils 下有一个 createMultiMaterialObject(geometry, materials)。它实质上创建了多个网格，这些网格在一个组中共享相同的几何体。

例子:

var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [

    new THREE.MeshLambertMaterial( { color: 0xffffff} ),
    new THREE.MeshBasicMaterial( { color: 0x222222, wireframe: true} )

]);

THREE.SceneUtils source code