The raycaster within threejs can only pick out one specific part of my gltf model at any given moment

Hey there, I'm just starting out with three.js and would really appreciate any guidance.

I have a gltf model where multiple parts come together to form a single model. My goal is to select the entire model as one entity, but when using raycaster for selection, it only picks up individual parts.

For example, imagine I have a cube and when hovering over it, only one face gets selected at a time.

Below you'll find my code... Any assistance is welcome

    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)

  }

Answer №1

To locate the root of the file, one must embark on a journey through various possible paths, each leading to the same destination in its unique way.

Consider this approach

let currentObj = intersects[ i ].object;

// Navigate upwards until reaching the root of the gltf file
while (currentObj !== gltf.scene && currentObj.parent) {
  currentObj = currentObj.parent;
}

if (currentObj === gltf.scene) {
  // The root of the scene has been found

Alternatively

// During loading
const meshSet = new Set();
gltf.scene.traverse(node => {
  if (node.isMesh) {
    meshSet.add(node);
  }
});


// On selection
let currentObj = intersects[ i ].object;
if (meshSet.has(currentObj)) {
  // A scene object is picked, utilize gltf.scene

Another option could be

// During loading phase
gltf.scene.traverse(node => {
  if (node.isMesh) {
    node.gltfData = gltf;
  }
});

// When selecting an object
let currentObj = intersects[ i ].object;
if (currentObj.gltfData) {
  // Access obj.gltfData.scene

And so forth...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

An error occurred due to a class being instantiated within a module, resulting in an overflow of the

On line 7, the console.log statement prints out correctly. host.js "use strict"; var engine = require('./engine.js'); var base = require('./base.js'); var player = new base.Avatar(); console.log(player.x); class PillarGame extends ...

The error `Uncaught SyntaxError: Unexpected token o` occurred while trying to parse JSON

I'm currently working on a server API and scripts that send and receive data in JSON format. However, I am facing an issue when trying to parse the received data as it returns "undefined". Here is a sample of the data: [{"id":"1","name":"Item 1","d ...

Exploring the Depths of MongoDB Arrays

Below is the structure of my MongoDB data: { "_id": "QEvgJKERy5xGNLv7J", "title": "test 2", "owner": "HQNGYZvrrdQRwLNvT", "markdown": "sdfasdfdasf adsfadsfasdf", "state": "Draft", "category": [ "Bios & Memoirs", "Classics" ], " ...

JavaScript code that displays values that are not equal

Here is a code snippet that checks whether two arrays of objects are equal or not. How can we enhance this code to log which answer is not matching? The structure of the arrays: arrayA represents user answered questions, while arrayB contains correct answ ...

Hiding an element in Bootstrap 4 with JavaScript

I need to find a way to hide certain elements on the page that have the 'd-md-block' class applied to them. Using jQuery hide/show functions is not an option due to the importance of the class definition. For example, I want an element to be vis ...

Is there a way to create a blurred background effect while the popup is in use?

I prefer my popup to have a dark or blurred background when active. The popup itself should remain the same, with only the background being darkened. I would like a dark layer overlaying the entire page. This script should be compatible with any website wh ...

New to Javascript? Learn how to handle undefined variables in your functions

I am encountering an issue with my code. I intend for it to display: aaa bbb ccc ddd However, it currently shows: Undefined bbb Undefined ddd Is there a way to ensure that test3 is correctly defined outside of the aaa function? var test1; var test ...

Cluster execution error encountered while utilizing Google Maps in Node.js

Recently, I have started using the node.js platform and I am looking to integrate the googlemap cluster library into my project. However, I am facing issues while trying to run the source code. If you want to explore the googlemaps cluster API, you can fi ...

What is the proper way to transfer data to PHP using AJAX?

I'm facing an issue while trying to send FormData to a PHP file. When I press submit, nothing happens. However, when I send data separately, it works fine. <form method="post" class="code_form" enctype="multipart/form-data& ...

Angular 14 - Issue with passing values through props - Error: Uncaught (in promise): InvalidCharacterError occurs when attempting to set attribute with 'setAttribute' method

I am a beginner with Angular and encountering an issue when trying to pass props from a parent component to a child component. The specific error I am facing is related to an invalid attribute name while using Angular version 14.2.5. core.mjs:7635 ERROR ...

String arrays in Javascript with arithmetic operators

I am working with an array that contains mathematical signs. var signs = ['+', '-', '*', '/']; In addition, I have two variables representing digits to combine with each sign from the array. var right_digit = 1; v ...

Unable to manipulate JQuery lightSlider slides using element index

I've been working on a new page design at this link: The code is still a work in progress, so bear with me as I test out some functions and scripts. At the end of the first section, there are 4 logos that, when clicked, will trigger a modal to pop u ...

Tips on how to correctly pass a .JSON object in the setState function of a reactJS

I am having an issue when attempting to pass a .json file in the following format: this is my class import MyForm from './MyForm'; class CreateProject extends React.Component{ constructor(){ super(); this.state = { categori ...

How to create a clickable link using Vuetify's v-btn component

As a newcomer to vue and vuetify, I would greatly appreciate some explanation and examples. My goal is to create a button that directs users to an external site, like youtube.com. Below is the code I currently have, but unfortunately it's not function ...

A guide on implementing multiple ternary operators in a Vue.js template

Is it possible for a template to return three different values instead of just two, based on the data? I am familiar with using two conditions, but is there a way to use more than two without getting a syntax error? <option {{ change === 1 ? &apos ...

Angular image source load test encountered an error

<div class="col-xs-4 col-sm-4 col-md-4"> {{jsonData[current].profilepic}} <div ng-if=IsValidImageUrl(jsonData[current].profilepic)> <img id="pic" ng-src="{{jsonData[current].profilepic}}" alt=""/> </div> < ...

Error: Cannot execute products.map in React JS because it is not a function

I'm encountering a TypeError: products.map is not a function error while attempting to iterate or map through the objects in my current state. I am fetching products from an API and storing them in state with the intention of displaying these objects. ...

Creating hyperlinks for objects in three.js can be achieved by using the

Here is the code from my firstpage.js file: $(function(){ /* initializing variables */ var scene, camera, renderer; var spotLight, hemi; var SCREEN_WIDTH, SCREEN_HEIGHT; var mouse var loader, model, animation; var objects = []; function init(){ / ...

I am having an issue in React.js where my state is not updating until the second click instead of the first one

Whenever I click items on my dropdown menu, the state only updates after clicking twice. I have provided a video and some code snippets for reference. How can I resolve this issue? https://i.sstatic.net/LkXUx.gif Parent Class Component (APP): class App e ...

The hide() and on() methods are not compatible with Internet Explorer (IE)

My code is working fine on Google Chrome, but for some reason it's not functioning properly on Internet Explorer (IE). I'm using IE11 and really need this to work on all browsers. Please help me figure out what's going wrong here. $(' ...