渲染單個網格顏色變化

Question

我有一個包含框的網格，非常類似於http://threejs.org/examples/#canvas_interactive_voxelpainter 。 現在，我發起了一個懸停狀態，當現場一箱是mouseover它原來的背景灰色。 太好了！ 除非我多"box"上的網格和我去改變material的背景顏色hovered項目，它呈現所有的"box's"灰色背景。

這是我在做什么：

var voxel = new THREE.Mesh( this.cubeGeometry, this.cubeMaterial );
voxel.position.copy( intersect.point ).add( intersect.face.normal );
voxel.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
this.scene.add( voxel );
this.blocks.push( voxel );
var domEvents   = new THREEx.DomEvents(this.camera, this.renderer.domElement)
// DOM events for inside 3d rendering
domEvents.addEventListener(voxel, 'mouseover', this.onDocumentMouseOverCube.bind(this),false);
domEvents.addEventListener(voxel, 'mouseout', this.onDocumentMouseOutCube.bind(this),false);

在這里，我們創建一個box -然后eventListeners特定mesh eventListeners提供eventListeners 。 一旦將這個mesh物體懸停了，我們的mouseover被執行：

this.mouse.x = ( event.origDomEvent.clientX / this.renderer.domElement.width ) * 2 - 1;
this.mouse.y = - ( event.origDomEvent.clientY / this.renderer.domElement.height ) * 2 + 1;

this.raycaster.setFromCamera( this.mouse, this.camera );
var intersects = this.raycaster.intersectObjects( this.blocks );
if ( intersects.length > 0 ) {

    var intersect = intersects[ 0 ];

    if ( intersect.object != this.plane ) {
        console.log(intersect.object);


        // update color on hover
        intersect.object.material.color.setHex(this.colorHover);
        console.log("hover color");
        this.render();
    }
}

現在這很好用，唯一的問題是-像應該這樣調用this.render() (this.renderer.render( this.scene, this.camera )) 。 但是當我有多個box's ，它繼續前進並更改每個box的每種background色，我什至logged了我所有的對象以確認object.material.color是僅一個box的灰色十六進制，而並不是所有box's都在集，這是事實。 我正在發送正確的數據。 所以我假設它與實際引擎的rendering有關？

有什么建議嗎？

Answer 1

材質只有一個實例，這些實例在網格之間共享。 簡單的解決方案是為每個網格克隆材質：

var voxel = new THREE.Mesh( this.cubeGeometry, this.cubeMaterial.clone() );

現在，每個盒子都接受自己的顏色。

---

我不知道這是否仍然適用，但是考慮性能時，您將要使用自定義着色器材質 ，因為屬性和頂點/片段程序是通過引用復制的。 參見這篇Three.js帖子，在網格之間共享ShaderMaterial，但具有不同的統一集 。

示例代碼：

var phongShader = THREE.ShaderLib.phong;
this.shaderMaterial = new THREE.ShaderMaterial({
    uniforms: phongShader.uniforms,
    vertexShader: phongShader.vertexShader,
    fragmentShader: phongShader.fragmentShader,
    lights:true
});
var voxel = new THREE.Mesh( this.cubeGeometry, this.shaderMaterial.clone() );

然后您通過制服更改顏色，如下所示：

intersect.object.material.uniforms.diffuse.value.setHex( this.colorHover );

Three.js r.71

PS：克隆r.71中的默認Phong材質對我來說也只在渲染器信息中顯示一個程序，因此Three.js可能在內部對其進行了優化。