raycaster in threejs only selects a single part of my gltf model at a time

user_13649239 0
Viewed 401

Hi there I am completely new to three.js so any help is appreciated.

I have a gltf model in which many parts make a single model. I want to select the model as a whole but when I am using raycaster to select the model I am selecting those individual parts.

Example: Let's say I have a cube when I am hovering over it only a single face is getting selected at a time.

below is my code... Any help is appreciated

    var raycaster = new Raycaster();

    loader.load("Purplelogo/Purplelogo.gltf", ( gltf ) => {

    scene.add( gltf.scene );

    gltf.scene.position.set(2,-0.9,1);
    gltf.scene.scale.set(0.9,0.9,0.9);
    gltf.scene.rotation.set(2,2,5);

  });

  raycaster.setFromCamera( mouse, camera );

  var intersects2 = raycaster.intersectObjects( scene2.children, true );

  for ( var i = 0; i < intersects2.length; i++ ) {

    intersects2[ i ].object.rotateX(3)

  }
raycasting three.js javascript
1 Answers

You need to somehow find the root of the file. You can do that in 1000 different ways.

Here's one

let obj = intersects2[ i ].object;

// walk up until you get to the root of the gltf file
while (obj !== gltf.scene && obj.parent) {
  obj = obj.parent;
}

if (obj === gltf.scene) {
  // it's the root of the scene

Here's another

// at load time
const allMeshesInGLTF = new Set();
gltf.scene.traverse(node => {
  if (node.isMesh) {
    allMeshesInGLTF.add(node);
  }
});


// then at pick time
let obj = intersects2[ i ].object;
if (allMeshesInGLTF.has(obj)) {
  // an object in the scene picked, use gltf.scene

Here's another

// at load time
gltf.scene.traverse(node => {
  if (node.isMesh) {
    node.gltf = gltf;
  }
});

// at pick time
let obj = intersects2[ i ].object;
if (obj.gltf) {
  // use obj.gltf.scene

etc...

user_1285110
Related