After successfully loading an fbx file using FBXLoader and adding it to the scene object, I encountered an issue where I couldn't interact with the object on click to apply transform controls. Interestingly, all other objects were clickable except for those loaded through FBXLoader.
var loader = new THREE.FBXLoader( manager );
loader.load( 'assets/models/fbx/iphone_ascii.fbx', function( object ) {
scene.add( object );
}, onProgress, onError );
Below is my intersection code:
onMouseDown(event) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
let rect = this.renderer.domElement.getBoundingClientRect();
this.mouse.x = ((event.clientX - rect.left) / (this.viewportWidth)) * 2 - 1;
this.mouse.y = - ((event.clientY - rect.top) / (this.viewportHeight)) * 2 + 1;
let vector = new THREE.Vector3( this.mouse.x, this.mouse.y, 1 );
vector.unproject(this.camera);
let ray = new THREE.Raycaster( this.camera.position, vector.sub(this.camera.position).normalize() );
let intersects = ray.intersectObjects(this.scene.children);
if (intersects.length > 0) {
if (this.activeobject !== intersects[0].object) {
this.activeobject = intersects[0].object;
this.transformControls.detach(this.activeobject);
this.transformControls.attach(this.activeobject);
}
}
this.renderer.render(this.scene, this.camera);
}