2

I'm trying to detect collision with terrain, that is created by modifying plane's verticles heights.

But Raycaster detects collision correctly only in about 10% of all attempts. You can see one of those intersections, that does not detect properly on following example: http://cerno.ch/~kamen/threejs/test.html

What am I doing wrong?

EDIT: Here's 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/

EDIT: Adding system specs as requested:

Windows 7 64bit

Chrome 26.0.1410

Threejs 57

Graphics card: GTX 560 Ti

SkaceKachna
  • 126
  • 1
  • 5
  • What is it supposed to do? It looks like the axis cross is sliding across the Z-axis and bouncing off the terrain. – John Dvorak Apr 25 '13 at 19:45
  • It's just animation to show, that the ray is going through showed mesh. – SkaceKachna Apr 25 '13 at 20:02
  • it seems to intersect the terrain and be occluded by it. The intersection point moves with the terrain. – John Dvorak Apr 25 '13 at 20:04
  • It could well be a graphics card issue. Please post your specs: OS, browser, GPU... – John Dvorak Apr 25 '13 at 20:05
  • No intersection is actually detected. The camera just follows the bouncing shape. Terrain is not moving, the ray is not moving. The boucing is just to show the intersection :) – SkaceKachna Apr 25 '13 at 20:06
  • I added my specs. But I hardly doubt its graphics card issue. I tried some of the raycaster examples and it worked just fine. – SkaceKachna Apr 25 '13 at 20:09
  • 1
    Found my error. I thought, that rotation vector, used to rotate object, and direction vector, used in ray, are same things. After I transfer my rotation vector to direction vector, it works just fine. How to transfer rotation vector to direction vector: http://stackoverflow.com/questions/14023764/how-to-get-orientation-of-camera-in-three-js – SkaceKachna Apr 25 '13 at 20:50

1 Answers1

2

Found my error. I thought, that rotation vector, used to rotate object, and direction vector, used in ray, are same things. After I transfer my rotation vector to direction vector, it works just fine. How to transfer rotation vector to direction vector: How to get Orientation of Camera in THREE.js

Community
  • 1
  • 1
SkaceKachna
  • 126
  • 1
  • 5