渲染单个网格颜色变化

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可能在内部对其进行了优化。