The three.js raycaster is able to detect objects both in front of and behind the specific object I am trying to select

I am currently working on rendering a 3D model of a house using Three.js and encountering an issue with the raycaster in my code. The problem I'm facing is that it's selecting every object both behind and in front of the specific object I want to select. What I actually need is for it to return just the name of the selected object. Any guidance or assistance on this matter would be greatly appreciated. As of now, I am only logging the name of the selected object to the console.

function main() {
  // Function body here
}
javascriptthree.js

Answer №1

Utilizing the 

raycaster.intersectObjects( objects, recursive = true )
function will detect intersections with all provided objects and their children. For more precise results on a specific object, only include that particular object in the call to intersectObjects. This method also enhances performance significantly.

If you are unsure which object to target, the intersection outcomes are conveniently sorted by proximity. The closest object is listed first for easy access.

For additional information, refer to:

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

Function in Typescript used for checking types and catching compilation errors from external sources

Fact: I am currently using TS version 2.3.4. I have developed a function that checks if a variable is defined (it takes the parameter variable and returns 'undefined' !== typeof variable). It's quite simple. export function IsDefined(variab ...

javascripttypescripttypescript-typingstypescript2.0

Error message: Attempting to access the property '_layerAdd' of an undefined object in the context of vue and leaflet integration

Encountering an issue while attempting to include a feature group on my map: TypeError: Cannot read property '_layerAdd' of undefined The section of code causing the error: <l-map id="mapid" :zoom="zoom" :center="center" /> var ...

javascriptvue.jsleaflet

Sort the array by unique ID and retrieve the object with the first and last index

I am working with an array that looks like this: [{ "res": [ '123', 'One', '20210318' ] }, { "res": [ '123', 'One', '20210319' ] }, { "res": [ '123&ap ...

javascriptarrays

applying multiple conditions to filter data in javascript

I have been working on filtering data based on input, and it is functioning well. However, I am looking to add an additional condition to the filter. I want it to return if either the title or another value (such as sendFrom) is provided. const newData = ...

javascriptreactjsfiltering

Can you create a shadow in three.js that doesn't require being cast from an object?

I'm currently developing a horror game and I'm looking to create a creepy shadow moving along a wall without any specific source. Is it feasible to achieve this effect, and if so, what steps should I take to implement it? While I suspect that dy ...

three.js

HTML Element Split in Two by a Line in the Middle

Greetings to all, after observing for a while I have decided to make my first post here (and just to clarify, I am an electrical engineer, not a programmer). I am in search of creating a unique element in HTML where I can detect clicks on both its upper a ...

javascripthtmlcss

What is the best way to check for changes in value using the onchange

The function is encountering an error and failing to execute. Despite my attempts to check for the onchange property in order to prevent errors, I keep receiving an error message stating "Cannot read property 'onchange' of undefined." Below i ...

javascriptjquery

What is the standard practice in AJAX for determining a specific state during page loading?

Since I started diving into the world of serious ajax operations, one question has been on my mind. Let me illustrate with an example. Imagine fetching a standard HTML page for a customer from the server. The URL could look like this: /myapp/customer/54 ...

javascriptajaxparameterssession-statestate

Learn how to remove data from a React JS application without causing a page refresh by utilizing the useLoaderData() function in conjunction with React Router

I am working on preventing my table from refreshing with the new version of userLoadData from react-router-dom@6 after deleting some data. In an attempt to achieve this, I created a function called products() within useLoaderData. While this function succ ...

javascriptreactjsreact-hooksreact-routerreact-router-dom

Can Angular JS apply the uppercase filter to a boolean value?

My Angular 1.4.12 binding looks like this: {{ mob.mobDataSettings[7].value | uppercase }} The first part is a boolean value from a JSON file, which can be either true or false. But when rendered in HTML, it is not showing up as uppercase (e.g. TRUE), in ...

javascriptangularjsangular-filters

To modify the text within the pagination select box in ANTD, follow these steps:

Is it possible to modify the text within the ant design pagination select component? I have not been able to find a solution in the documentation. I specifically want to replace the word "page" with another term: https://i.sstatic.net/w55hf.png ...

javascripthtmlcssreactjsantd

Is there a way to view the contents of a file uploaded from <input type="file" /> without the need to send it to a server?

Having trouble uploading a JSON file from my local disk to Chrome storage. Whenever I use the <input type="file"> tag and useRef on the current value, it only returns the filename prefixed with 'C:\fakepath...' ImportExport Component: ...

javascriptreactjsformsdomgoogle-chrome-extension

Encountering an issue while attempting to fetch a value from a nested object property with VueJS Interpolation

I'm struggling to properly display nested arrays in Vue JS. Below is a snippet of my JSON data: { "id": 1, "slug": "test-page", "banner": { "title": "banner title", "subTitle": "my sub title", "hasSubTitle": false, "hasClass": " ...

javascriptjsonvue.js

Orbiting ThreeJS object positioned at the coordinates (0,0,0)

I have set up a ThreeJS Scene similar to the image provided. The issue I'm facing is when trying to rotate Obj2 vertically around Obj1, it ends up rotating around the Z axis instead of the center point (0,0,0). My goal is for Obj2 to orbit exclusively ...

javascriptthree.js3d

Determining the value of an element by examining the clicked element

My goal is to determine the remaining balance in my cart based on the selected item. Let's say I have 3 items in my cart, and I choose one that costs $100. Previously, I stated that I had a total of $300. In my HTML code, there are elements with IDs ...

javascriptjqueryonclickcart

Unable to retrieve /ID from querystring using Express and nodeJS

I am brand new to the world of Express and nodeJS. I have been experimenting with query strings and dynamic web pages, but I keep getting an error saying that it cannot retrieve the ID. I'm completely lost as to where I might have made a mistake. An ...

javascriptnode.jsexpress

Is there a more effective way to structure my code than using multiple "IF/ELSE" statements?

Here is the current code snippet that I have: (category=="Ljud & Bild") ? byId("nav_sub_ljud_bild").style.display='block' : byId("nav_sub_ljud_bild").style.display='none'; (category=="Datorer") ? byId("nav_sub_datorer").style.disp ...

phpjavascripthtml

Is there a way to prevent a premature closure of a connection?

I'm currently faced with the task of moving a substantial amount of data from a MySQL database, exceeding the maximum query size. To accomplish this, I need to process it in chunks through a loop. However, encountering an issue where about half of the ...

javascriptmysqlnode.jsasynchronouscallback

Ensuring the screen reader shifts focus to the previous element

Utilizing the screen reader to redirect focus back to the previous element has proven to be a challenge for me. After clicking the Return button, it will vanish and the Submit button will take its place. If the Submit button is then clicked, it disappears ...

javascriptreactjsreact-reduxaccessibilityscreen-readers

Is there a way to automatically mount tabs without manually clicking on them?

Looking to optimize data fetches within a large tab container in React using material-ui. My goal is to have each Tab component handle its own data fetching, especially for Tabs with a greedyLoad prop that will be mounted upon the initial mounting of the T ...

javascriptreactjsmaterial-ui