Question

我一直在使用Google WebGL Globe并尝试进行一些基本的互动，其中一个包括点击由纬度，经度等生成的条形图。

从我看过的三个例子来看，答案在于投影仪和光线以找到交叉点。我遇到的问题是下面的代码，它已经从其他几个来源稍微调整过来了：

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不是函数”是具体的错误。

有什么想法吗？提前谢谢。

Answer 1

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

Answer 2

您似乎正在使用旧版本的库。更新至r.52。

Answer 3

请尝试在数组中添加场景对象，然后尝试下面的代码。

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;
        }

intersectObjects不是一个函数

3 个答案: