Question

我有一个包含框的网格，与http://threejs.org/examples/#canvas_interactive_voxelpainter非常相似。现在，当场景中的方框为mouseover时，我启动了悬停状态，它将背景变为灰色。哪个好极了！除非我在网格上多次"box"并且我要更改material项的hovered背景颜色，否则它会呈现灰色背景的所有"box's"。< / p>

继续我正在做的事情：

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。一旦此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时，它会继续并更改每个background的每个box颜色，我甚至logged我的所有对象都要确认object.material.color是只有一个box的灰色十六进制而且并非所有box's都被设置，这证明是真的。我正在发送正确的数据。所以我假设它与实际引擎的rendering有关？

建议？

Answer 1

只有一个材质实例，在网格中共享。简单的解决方案是克隆每个网格的材质：

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

现在每个盒子都接受自己的颜色。

我不知道这是否仍然适用，但考虑到您希望使用自定义着色器材质的性能，因为属性和顶点/片段程序是通过引用复制的。请参阅此帖子Three.js, sharing ShaderMaterial between meshes but with different uniform sets。

示例代码：

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在内部优化它。

渲染单个网格颜色变化

1 个答案: