I’m importing an .fbx file containing four meshes. For some reason, I can’t get a raycast intersect with any of the meshes. I’ve had success with detection of THREE-generated geometry, but no results on the import. Here’s the code…
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.y = 50;
camera.position.z = 50;
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0xffffff, 1);
document.body.appendChild( renderer.domElement );
let meshes = [];
window.addEventListener("click", onMouseClick, true);
const loader = new FBXLoader();
// fbx file is four meshes imported as single file
loader.load('/models/aromator.fbx', (object) => {
object.traverse(function(child){
if(child.isMesh){
meshes.push(child);
}
})
scene.add(object);
//"meshes" array logs as four meshes
const raycaster = new THREE.Raycaster();
const cursor = new THREE.Vector2();
let active = false;
function onMouseClick(event){
cursor.x = (event.clientX/window.innerWidth) * 2 - 1;
cursor.y = (event.clientY/window.innerHeight) * 2 + 1;
console.log("mouse clicked");
clickParts();
}
// nothing happens when this function is called
function clickParts(){
raycaster.setFromCamera(cursor, camera);
var intersects = raycaster.intersectObjects(meshes);
console.log(intersects.length); // this returns zero
if(intersects.length > 0){
if(active){
console.log(intersects[0].name);
}
}
active = false;
}
const animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();
I’m new to Three.js, so I suspect I’m making an elementary mistake. Any input would be appreciated.