单击时使用Raycaster更改Box的脸部颜色

时间:2019-02-22 14:14:35

标签: javascript three.js raycasting

我试图让光线投射器能够选择已创建的多维数据集之一,然后更改已单击的脸部颜色。我已经能够使它与整个对象一起使用,但不能与单个对象面对。

有人可以解释intersectObject()和intersectObjects()之间的区别,因为我认为这与问题有关。

这是尝试选择多维数据集的一个面的代码,单击该多维数据集的面时该加载但不执行任何操作

function onDocumentMouseDown( event ){ 
    event.preventDefault();

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

    raycaster.setFromCamera( mouse, camera );

    var intersects = raycaster.intersectObject( mesh );

    for (var i = 0; i < intersects.length; i++){
        intersects[ i ].face.color.setHex( 0xDDC2A3 );
        mesh.geometry.colorsNeedUpdating = true;
    }
    renderer.render(scene, camera);
   }

}

这是我场景中的多维数据集

var cubeGeometry2 = new THREE.BoxGeometry(5, 5, 5);
var cubeMaterial2 = new THREE.MeshLambertMaterial({color:0xffff00});
var cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial2);
//Cube position to sit on top of the plane, allow to cast shadows and add
cube2.position.x = -5;
cube2.position.y = -5;
cube2.position.z = -5;
scene.add(cube2);

1 个答案:

答案 0 :(得分:1)

  

有人可以解释一下intersectObject()和intersectObjects()之间的区别,因为我认为这与问题有关。

def accumulate_iter(combiner, null_value, term, a, next, b): result = term(a) while a<=b: a = next(a) if a<=b: result = combiner(term(a), result) else: result = combiner(null_value, result) return result 的{​​{3}}中提到的一样,THREE.Raycaster期望单个对象,而intersectObject()期望将对象数组作为第一个参数。但是,这与您的问题无关。

问题在于如何设置材料。如果要为每张脸都有颜色,则必须将intersectObjects()设置为THREE.Material.vertexColors。请记住,这种方法仅适用于THREE.FaceColor

演示:documentation

THREE.Geometry