Raycasting against BufferGeometry Line threejs

Question

I'm trying to raycast against a line that is created with BufferGeometry. But it does not seem to support raycasting?

When initiating BufferGeometry as shown here raycasting does not work on this object.

But when I replace BufferGeometry with Geometry raycasting works fine.

var geometry = new THREE.Geometry();
var lines = new THREE.Object3D();

for ( var i = 0; i <array.length; i++) {
   x = ( Math.random() - 0.5 ) * 30;
   y = ( Math.random() - 0.5 ) * 30;
   z = ( Math.random() - 0.5 ) * 30;
   geometry.vertices.push(new THREE.Vector3(x,y,z));
}

var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x9999FF, opacity: 0.5 } ) );
lines.add(line);
scene.add(lines);

I've tried to wrap BufferGeometry to Object3D also, does not affect the outcome. How to raycast against BufferGeometry line?

EDIT

Fiddle with BufferGeometry

Fiddle with Geometry

@WestLangley when working on fiddles I discovered it's not caused by `BufferGeometry`. My line was too small and I could not hit it with a ray. So the problem is solved, thanks for the comment! — user3960875, Jul 21 '15 at 05:27
I was wrong, it's not too small. It is just always intersecting, probably a bug somewhere. — user3960875, Jul 21 '15 at 06:03

score 0 · Answer 1 · answered Jul 21 '15 at 10:38

I worked a little on your BufferGeometry example and now it works

http://jsfiddle.net/eviltoad/s9fsds19/11/

material.originalColor = material.color;
// line
lines = new THREE.Object3D();
line = new THREE.Line( geometry,  material );
lines.add(line);
scene.add(lines);

document.onmousemove = function(event){
    mousePosition.x = 2 * (event.clientX / window.innerWidth) - 1;
    mousePosition.y = 1 - 2 * ( event.clientY / window.innerHeight);
    mousePosition.unproject(camera);
    var raycaster = new THREE.Raycaster(camera.position,mousePosition.sub(camera.position).normalize());
    console.log(lines.children);
    var intersections = raycaster.intersectObjects(lines.children);
    console.log(intersections);
    lines.children.forEach(function( child ) {
        child.material.color = child.material.originalColor;
    });
    for( var j = 0; j < intersections.length;j++ ) {
        var intersection = intersections[j];
        var object = intersection.object;
        object.material.color = new THREE.Color("#FFFFFF");
    }
};

Thanks but as I said in the comments mine also works (see fiddles provided). But the same thing (that works in fiddle) does not work in my drawing application as there is a bug somewhere... — user3960875, Jul 21 '15 at 10:56

Raycasting against BufferGeometry Line threejs

1 Answers1