我一直在跟踪mrdoobs的示例,该示例如何使用光线转换来处理可单击对象。我也研究了许多类似的问题,并尝试了无数种方法。
光线转换有效...如果我的距离小于1。

但是,“Raycaster”被设置为接近0和无限远(默认值)。
我还没有看到设置距离的任何代码示例。

我希望有另一双眼睛。

// snippet
glow.clickables = [];
var cubeGeo = new THREE.CubeGeometry(2, 2, 2);
cubeGeo.computeFaceNormals();
var cube = new THREE.Mesh(cubeGeo, redmat);
cube.position.y = 10;
cube.position.x = 0;
cube.position.z = -12;
cube.overdraw = true;
glow.Vis.scene.add(cube);
glow.clickables.push(cube);
onclick_();

var onclick_ = function() {
    $('#world').on('mousedown', function(e){
        var mouseX = (event.offsetX / $('#world').width()) * 2 - 1;
        var mouseY =  - ( event.offsetY / $('#world').height()) * 2 + 1;
        var vector = new THREE.Vector3(mouseX, mouseY,  0.1); //what should z be set to?
        //console.info(vector); // A vector between -1,1 for both x and y. Z is whatever is set on the line above
        projector.unprojectVector(vector, glow.Vis.camera);
        var conts = glow.Vis.controls.getObject().position; // control 3dObject which the camera is added to.
        var clickRay = new THREE.Raycaster(conts, vector.sub(conts).normalize());
        var intersects = clickRay.intersectObjects(glow.clickables);
        console.info(intersects.length);
        if(intersects.length > 0) {
            alert("Click detected!");
        }
    });
}

最佳答案

这样设置鼠标位置更加准确。

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

关于three.js - Threejs raycaster仅在 super 关闭时有效,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17906228/

10-10 03:14