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

Question

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

我遇到了一个问题，即创建共享相同几何体的两个网格时，一个材质是线框，另一个材质是纹理。如果一个材质是线框，而另一个材质只是颜色填充，则可以正常工作；但是，一旦我使第二个材质成为纹理，它就停止工作了。

如果我注释掉`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 );

- Andy Poes

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源代码

- Greg Tatum

Answer 2

很遗憾，无法在使用线框的对象和不使用线框的对象之间共享几何体。您需要克隆该几何体。这提醒我我们还没有为Geometry编写.clone()方法。

- mrdoob

---

谢谢！我只需要复制生成几何体的代码。只是出于好奇，既然我正在通过这个学习经验来完成所有这些工作 - 这是 three.js 的限制吗？还是 WebGL 的限制？ - Andy Poes

两者都是吧。线框图的渲染方式与实体不同。 - mrdoob