javascript 三个 OrbitControls：双击对象

Question

我正在使用 THREE.js 和 OrbitControls.js。我想双击一个对象然后做一些事情。这是我正在使用的代码。 cube1 是我要双击的对象。

var projector = new THREE.Projector();

document.addEventListener('dblclick', ondblclick, false);

function ondblclick(event)
{               
    var vector = new THREE.Vector3(
    ( event.clientX / window.innerWidth ) * 2 - 1,
    - ( event.clientY / window.innerHeight ) * 2 + 1,
    0.5);
    projector.unprojectVector( vector, camera );

    var ray = new THREE.Ray( camera.position, 
                     vector.subSelf( camera.position ).normalize() );

    var intersects = ray.intersectObjects( cube1 );

    if ( intersects.length > 0 )
    {
        alert("hit");
    }
}

不幸的是，代码不起作用。我感谢任何帮助。这是我使用的相机：

var camera = new THREE.PerspectiveCamera( 45, WIDTH/HEIGHT, 0.1, 10000 );
        camera.position.z = 1500;
        camera.position.y = -1800;
        scene.add(camera);

这是 OrbitControls：

var controls = new THREE.OrbitControls(camera, renderer.domElement);

Answer 1

我刚刚修正了 ondblclick 函数

function ondblclick(event) {
    x = (event.clientX / window.innerWidth) * 2 - 1;
    y = -(event.clientY / window.innerHeight) * 2 + 1;
    dir = new THREE.Vector3(x, y, -1)
    dir.unproject(camera)

    ray = new THREE.Raycaster(camera.position, dir.sub(camera.position).normalize())
    var intersects = ray.intersectObject(sphere);
    if ( intersects.length > 0 )
    {
        alert("hit");
    }
}

这是工作示例：http://jsfiddle.net/ddbTy/241/

javascript 三个 OrbitControls：双击对象

javascript THREE OrbitControls: doubleclick Object

javascript

double-click

three.js