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

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

Answer 2

不幸的是，不可能在使用線框的對象和不使用線框的另一個對象之間共享幾何。 您需要克隆該幾何體。 這讓我想起我們還沒有為Geometry做過.clone() 。