javascript THREE OrbitControls:doubleclick对象

时间:2016-11-01 14:04:02

标签: javascript three.js double-click

我正在使用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);

1 个答案:

答案 0 :(得分:2)

我刚刚纠正了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/