Raycaster 不报告与飞机相交答案

【问题标题】：Raycaster doesn't report intersection with planeRaycaster 不报告与飞机相交
【发布时间】：2013-04-26 23:00:44
【问题描述】：

我正在尝试检测与地形的碰撞，这是通过修改平面的顶点高度创建的。

但 Raycaster 仅在大约 10% 的尝试中正确检测到碰撞。您可以在以下示例中看到其中一个未正确检测到的交叉点： http://cerno.ch/~kamen/threejs/test.html

我做错了什么？

编辑：这里是 jsfiddle

var camera, scene, renderer, gump = 0;
var geometry, material, mesh, map, axis, ray;

init();
animate();

function init() {

    //Create cam, so we can see what's happening
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.x = 500;
    camera.position.y = 300;

    //Init scene
    scene = new THREE.Scene();

    //Load terrain material
    material = new THREE.MeshBasicMaterial( { color: 0xff6666, wireframe: false } );
    geometry = new THREE.PlaneGeometry(128, 128, 127, 127);
    mesh = new THREE.Mesh( geometry, material );
    mesh.scale.set(50,50,50);
    mesh.rotation.x = -Math.PI/2;
    scene.add( mesh );

    //Create axis with position and rotation of ray
    axis = new THREE.AxisHelper( 100 );
    axis.position = new THREE.Vector3(333.2637, 216.6575, -515.6349);
    axis.rotation = new THREE.Vector3(1.6621025025, 0.119175114, -2.2270436357);
    axis.scale.z = 10;
    scene.add(axis);

    //Create actual ray, use axis position and rotation
    ray = new THREE.Raycaster();
    ray.ray.origin.copy(axis.position);
    ray.ray.direction.copy(axis.rotation);

    //Renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );

    document.body.appendChild( renderer.domElement );
}

function animate() {
    requestAnimationFrame( animate );

    if (mesh)
    {
        var intersecionts = ray.intersectObject(mesh);
        if (intersecionts.length > 0)
        {
            //Never actually happens
            console.log("OK");
        }

        //Move axis so you can see, that it clearly goes throught mesh object
        axis.translateZ(Math.cos(gump) * 2);
        gump += 0.01;

        //Focus camera on axis
        camera.lookAt(axis.position);
    }

    renderer.render( scene, camera );

}

http://jsfiddle.net/BAGnd/

编辑：按要求添加系统规格：

Windows 7 64 位

Chrome 26.0.1410

三个 57

显卡：GTX 560 Ti

【问题讨论】：

它应该做什么？看起来轴交叉在 Z 轴上滑动并从地形反弹。
这只是动画显示，光线正在穿过显示的网格。
它似乎与地形相交并被它遮挡。交点随地形移动。
很可能是显卡问题。请发布您的规格：操作系统、浏览器、GPU...
发现我的错误。我认为，用于旋转对象的旋转矢量和用于射线的方向矢量是相同的东西。在我将旋转向量转换为方向向量后，它工作得很好。如何将旋转向量转换为方向向量：stackoverflow.com/questions/14023764/…

标签： javascript three.js

【解决方案1】：

发现我的错误。我认为，用于旋转对象的旋转矢量和用于射线的方向矢量是相同的东西。在我将旋转向量转换为方向向量后，它工作得很好。如何将旋转向量转换为方向向量：How to get Orientation of Camera in THREE.js

【讨论】：