Raking against 3js geometry buffer line
I am trying to raycast against a string generated with BufferGeometry
. But he doesn't seem to support racism?
When run BufferGeometry
as shown here raycasting does not work on this object.
But when I change BufferGeometry
to 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 also tried to wrap BufferGeometry
in Object3D
without affecting the result. How is raycast versus line BufferGeometry
?
EDIT
source to share
I did a little work 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");
}
};
source to share