Selecting glTF with raycaster

Questions
, , ,
1

I’m playing around with the source code for the draggable cubes demo, and I’ve managed to load a glTF object into the app, so it sits amogst the cubes. Now, I want to be able to select and move the glTF object as I can with the cubes. However, when I click to send the raycaster, it’s not registering anything. When I look at the objects array in the console log, it contains many ‘mesh’ objects (the cubes) and one ‘scene’ (the glTF). I’m pretty sure this is why the raycaster isn’t hitting anything and thus not allowing me to move the glTF object. The raycaster function is called in the event handlers, which act upon the objects array, which the glTF obj is being pushed into. My question is, how can I access the mesh of the glTF, or if you have any other ideas as to how I can select this and move it with my event handlers, it’s greatly appreciated. Thanks!

glTF loader code:

var loader = new THREE.GLTFLoader();
loader.load(
	// resource URL
	'./vitra_eames_plastic_chair/scene.gltf',
	// called when the resource is loaded
	function ( object ) {

        object.animations; // Array<THREE.AnimationClip>
		object.scene; // THREE.Scene
		object.scenes; // Array<THREE.Scene>
		object.cameras; // Array<THREE.Camera>
        object.asset; // Object
        
        object.scene.position.x = -75;
        object.scene.position.y = -75;
        object.scene.position.z = -75;
        object.scene.rotation.x = 50;
        object.scene.rotation.y = 50;
        object.scene.rotation.z = 50;
        object.scene.scale.x = .5;
        object.scene.scale.y = .5;
        object.scene.scale.z = .5;
        object.scene.castShadow = true;
        object.scene.receiveShadow = true;
        
        boxScene.add(object.scene);
        objects.push(object.scene);
	},
	// called while loading is progressing
	function ( xhr ) {
		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
	},
	// called when loading has errors
	function ( error ) {

		console.log( 'An error happened' );

	}
);
2

Hi!
Could you provide a live code example with your model and the code for raycaster (how you get mouse coordinates, how you apply them in the raycaster, method(s) you use to find intersected objects and points of intersection etc)?
Or, at least, could you share the model in this thread?

3

Hi! This is all the code I’m working with. The glTF file is in the same parent folder also.

4

You’re using

var intersects = raycaster.intersectObjects(objects);

Try to use

var intersects = raycaster.intersectObjects(objects, true);

Reference

2 Likes
5

Hmmm, when I do that, everything renders exactly the same except I’m getting
Error: Session Error: Cannot read property 'style' of null argon.js:27296
in the console log, which I didn’t get before.

6

Oh sorry no, error fixed! Now the object is being selected, but not moving