Raycast in Three.js is struggling to locate object

Whenever I select a 3D model, my goal is to retrieve the object's ID, name, or the actual object itself in order to effectively delete it.

    function onDocumentMouseDown( event ) {
if (enableRaycasting){
event.preventDefault();
mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( 
    event.clientY / window.innerHeight ) * 2 + 1 );
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( scene.children, true );
console.log(intersects);    
if ( intersects.length > 0 ) {


scene.remove(intersects[0]); //doesnt work   
    scene.remove(intersects[0].object); //doesnt work
    scene.remove(intersects[1]); //doesnt work
scene.remove(intersects[1].object); //doesnt work                
    console.log(intersects[0].object.name) //Bot_Skinned_0
    console.log(intersects[0].object.id)// output: 72



}

    render();
}
}

Situation: Upon creating the object, its initial ID is 21 and the model's name is "BotSkinned" (as specified by object.name = "BotSkinned"). Subsequently, adding the object to the scene results in:

    scene.add( object );
    console.log(scene.getObjectByName("BotSkinned").id); //output: 21

Using Raycasting, my aim is to accurately target that specific object and potentially remove it. Unfortunately, none of the removal commands seem to be effective, and discrepancies between the assigned name and ID become evident. Does anyone have a solution for obtaining the correct object.id? This would offer a straightforward resolution. Edit: While simply using

scene.remove(scene.getObjectByName("BotSkinned"))
could suffice, the ideal scenario involves the raycast precisely identifying the desired object among many others in the future instances.

Answer №1

We have successfully identified the correct identifier: intersects[0].object.parent.parent.parent.id; Removing it is now a simple task: scene.remove(scene.getObjectById(intersects[0].object.parent.parent.parent.id)). It is our hope that this process will be just as seamless for gltf, collada, and other formats.

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

How do I select all checkboxes in TypeScript when I only click on one of them?

I'm currently working with a list of checkboxes in my HTML code: <div class="col-sm-12" *ngIf="ControllerModel"> <div *ngFor="let controller of ControllerModel" class="panel col-md-6 col-lg-6 col-xs-6"> <div class="panel-heading" ...

Is Typescript capable of converting ES6 code to ES5 during transpilation?

Currently, I'm in the process of developing an application utilizing Angular 2 and TypeScript. My goal is to incorporate a JavaScript method, specifically 'filter' for arrays, that is compatible with IE 11+, Chrome 45+, and other similar bro ...

suggesting options comparable to addthis or sharethis

Could you please check out ? There is a sharing box in the bottom right corner that resembles ShareThis. However, as far as I know, ShareThis does not have options for embedding or submitting content. Does anyone happen to know which plugin is being used ...

The process of embedding one script into another script is underway

I've been struggling to optimize the loading of a responsive/mobile page, but then I came across a jQuery plugin that dynamically toggles elements based on screen width. This seemed like the perfect solution as it eliminates the need for extra HTTP re ...

Here's a method for transferring data from one array to another: when there is existing data in the

Although this may seem simple to some, I have been struggling with it for hours without any success. If I have the following data in an array: var tDataValues = { id: "TenantID", text: "FullName", username: "Username", cnic: 'CNIC&ap ...

Automatically update div content using AJAX in a different approach

In my situation, I am facing a unique challenge compared to other queries. I have a div element with the following code <div id="ondiv"><?php ?></div> Within this PHP section are details of people who are currently online. Ideally, when ...

Is there a way to create an infinite fade in/out effect for this?

Is there a way to ensure that the method runs after the "click" event in this code snippet? The code currently fades in and out the div #shape while the start variable is true, but when I call the "start" method from the "click" event, the browser stops wo ...

Tips for utilizing identical properties across numerous styled elements:

Utilizing the styled-components library, I have enhanced the header components from the Blueprintjs library. The current template for the H6 component appears as follows: export const DH6 = styled(H6)` color: ${(props) => (props.white ? "white&qu ...

Creating an App on Shopify

After working on Shopify development for a little bit, I have encountered a specific requirement from my client that is not currently available in the app store. The task involves: Creating two discount tiers based on the total value of the cart (e.g. 1 ...

Navigating through the URL using an AJAX request with jQuery

After seeking assistance on how to loop through data in a json file from an asynchronous AJAX call in jquery using callback functions (Looping through AJAX and callbacks in jquery), I received valuable help. Now, I am curious about the possibility of loo ...

Mapping objects in an array with Javascript

This code snippet is intended for a React Native Chat app. The structure of my data should look something like this: const chatData = [ { id: 1, name: 'John Doe', messages: [ {text: 'Hello', sentAt: 'time here' ...

Is it possible to personalize Carousel-indicators within react-bootstrap?

I'm currently utilizing the Carousel component from . My goal is to customize the carousel-indicators, adding text and making them appear as buttons with text. However, when I attempt to do so, React renders 'ol' tag into a new CarouselItem ...

Is there a way to modify the props.data in a child component?

I need assistance with displaying a range from an array that is passed into a child component. Currently, my Parent component looks like this: import data from './data.json' return ( <Cell symbol={data.symbol} number={data.number} /> ) ...

Exploring and listing the key-value pairs from several arrays within an object

My inquiry pertains to the following function: function loadConfigurations(configs){ console.log(configs); } The 'configs' object received by the loadConfigurations function contains two properties --two arrays named "assigned" and "unassign ...

integrating an array into MongoDB using Angular and NodeJS

Encountering an issue with mlab (mongoose), angular.js, HTML, and JavaScript. When passing an array with values from an angular.js controller to the server side (node.js), it fails to insert the data into the schema in mlab. Below is my HTML code: <fo ...

What is the best way to securely store a sensitive Stripe key variable in an Angular application?

When implementing Stripe payment system in my Angular App, I often wonder about the security of storing the key directly in the code as shown below. Is this method secure enough or should I consider a more robust approach? var handler = (<any>windo ...

What is the reason behind the momentary functionality of v-for?

I'm facing a strange issue while working with Vue.js. I'm not sure if the problem lies with my code or if it's a bug in the framework. Here's the scenario: When I use v-for with a comma before it (v-bind), there are no errors but nothi ...

JavaScript Filtering Techniques

Looking for a simpler way to remove an item from a list of 10 items without using arrow functions. My current method is shown below, but I'm seeking a more efficient solution. function getFilteredItems(myItems) { var items = ['item1& ...

Is it possible that Typescript does not use type-guard to check for undefined when verifying the truthiness of a variable?

class Base {} function log(arg: number) { console.log(arg); } function fn<T extends typeof Base>( instance: Partial<InstanceType<T>>, key: keyof InstanceType<T>, ) { const val = instance[key]; if (val) { ...

Adding a class-matched element with a corresponding ID

Despite finding similar questions, I am still unable to achieve the desired outcome. Here is a list: <ul> <li class="class1"></li> <li class="class2"></li> <li class="class3"></li> <li class="class4"&g ...