Raycasting not working

I’m trying to interact with some parts of a loaded model and to do this I added some extras geometries using threejs editor. My problem is, I’m only able to interact with my geometries when I don’t add my mesh to the scene. I load the model, change it’s material, set my camera position to fit the model but don’t add it to the scene.

Here is my code for the GLTF loader:

  const loader = new THREE.GLTFLoader();
    loader.load('assets/cube branco.gltf', function (gltf) {
    let AuxScene = gltf.scene;
        let mesh = AuxScene.children[0];
        mesh.material = new THREE.MeshPhongMaterial();
        mesh.children[1].material.side = THREE.DoubleSide;

Here is my raycasting code:

function onMouseOver( event ) {
		var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
		var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
		var intersects = raycaster.intersectObjects( objects );
		if ( intersects.length > 0 ) {
			intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );

Any help or improvements are helpful…


Um, I can’t see something wrong in your code. Can you demonstrate the issue with a live example? You can use the following link as a template for your demo. It’s actually possible to upload assets like our glTF file to the online editor.

I rewrote the code and now it’s working. Sorry for late reply and thanks for your help!