Raycaster不报告与飞机的交叉

时间:2013-04-25 19:41:49

标签: javascript three.js

我正在尝试检测与地形的碰撞,这是通过修改飞机的垂直高度来创建的。

但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

Threejs 57

显卡:GTX 560 Ti

1 个答案:

答案 0 :(得分:2)

发现我的错误。 我想,用于旋转物体的旋转矢量和射线中使用的方向矢量是相同的。 在我将旋转矢量传递给方向矢量后,它工作得很好。 如何将旋转矢量传递到方向矢量:How to get Orientation of Camera in THREE.js