1

我一直在使用 Google WebGL Globe 并尝试进行一些基本的交互，其中之一包括单击由纬度、经度等生成的条。

从我看到的大量three.js 示例中，答案在于投影仪和射线来寻找交叉点。我遇到的问题是下面的代码，它已经从其他几个来源进行了微调：

var projector = new THREE.Projector();

if (event.target == renderer.domElement) {
    var x = event.clientX;
    var y = event.clientY;
    var v = new THREE.Vector3((x/w)*2-1, -(y/h)*2+1, 0.5);
    projector.unprojectVector(v, camera);
    var ray = new THREE.Ray(camera.position, v.subSelf(camera.position).normalize());
    var intersects = ray.intersectObjects(scene.children);
    if (intersects.length > 0) {
      console.log("success");
    }
}

具体来说，“ray.intersectObjects 不是函数”是错误。

有任何想法吗？提前致谢。

4

3 回答 3

16

没有回答...解决方案是使用new THREE.Raycaster-- 不是THREE.Ray

于 2013-06-23T19:29:51.667 回答
2

看来您使用的是旧版本的库。更新到 r.52。

于 2012-11-08T18:19:31.597 回答
0

请尝试在数组中添加场景对象并尝试以下代码。

function onDocumentMouseDown( event ) {
            event.preventDefault();             
            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( objects );                                   

                if ( intersects.length > 0 ) {              
                    console.log("success");                 
                }                          

                document.addEventListener( 'mousemove', onDocumentMouseMove, false );
                document.addEventListener( 'mouseup', onDocumentMouseUp, false );
                document.addEventListener( 'mouseout', onDocumentMouseOut, false );


            mouseXOnMouseDown = event.clientX - windowHalfX;
            targetRotationOnMouseDown = targetRotation;
        }
于 2012-11-08T08:44:27.193 回答