After loading a .obj file using the following code:
var loader = new THREE.OBJMTLLoader();
loader.load( "../obj/machine.obj", '../obj/machine.mtl', this.loadObject);
I attempt to detect a click on it with the following code:
click: function(event){
this.mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
this.mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
var vector = new THREE.Vector3( this.mouse.x, this.mouse.y, 1 ).unproject( this.camera );
this.raycaster.set( this.camera.position, vector.sub( this.camera.position ).normalize() );
console.log(this.scene.children);
var intersects = this.raycaster.intersectObjects( this.scene.children );
if ( intersects.length > 0 ) {
console.log("hitting something");
}
},
Even though the loaded 3DObject is visible in 'this.scene.children', the click detection only works on meshes. Here is an example of the structure of the object:
[THREE.Mesh, THREE.Line, THREE.PointLight, --> THREE.Object3D <-- ]0: THREE.Mesh__webglActive: true__webglInit: true_listeners: Object_modelViewMatrix: THREE.Matrix4_normalMatrix: THREE.Matrix3castShadow: falsechildren: Array[0]eulerOrder: (...)frustumCulled: truegeometry: THREE.IcosahedronGeometryid: 4material: THREE.MeshBasicMaterialmatrix: THREE.Matrix4matrixAutoUpdate: truematrixWorld: THREE.Matrix4matrixWorldNeedsUpdate: falsename: ""parent: THREE.Sceneposition: THREE.Vector3quaternion: THREE.QuaternionreceiveShadow: falserenderDepth: nullrotation: THREE.EulerrotationAutoUpdate: truescale: THREE.Vector3type: "Mesh"up: THREE.Vector3useQuaternion: (...)userData: Objectuuid: "46D85379-A9CE-4221-A599-39D13EE4CB34"visible: true__proto__: Object1: THREE.Line2: THREE.PointLight3: THREE.Object3D
It seems like the raycast method may need something specific for loaded 3DObjects. If anyone has any insights or ideas on what might be missing, I would greatly appreciate the help!