The Raycaster intersections in Threejs are not updated in real-time when objects are added to the scene, but

Currently, I am in the process of developing a Minecraft-inspired game using Three.js.

At the moment, my setup involves adding cubes to a scene along with a Raycaster that identifies if the pointer is hovering over any of the cubes. It then creates an indicator cube for the purpose of adding or removing a cube.

In the removal mode, the cube the pointer is on top of will be highlighted in red. Clicking on it will remove that cube. Subsequently, the Raycaster is triggered again to check if the pointer is now hovering over any cubes that were previously hidden behind the removed one. This process works smoothly.

Recently, I incorporated the feature of adding cubes with a click. When the pointer hovers over a cube, the indicator is placed next to the face where the new cube would be inserted. This functionality also works correctly.

However, an issue arises when adding a new cube. The Raycaster fails to recognize the new intersection with the newly added cube. Consequently, the indicator position is not updated immediately. Only after moving the mouse slightly does the Raycaster detect the new cube and update the indicator position.

A minimal Three.js file has been created, where pressing 1 activates "Add Mode" and pressing 2 activates "Removal Mode".


[Three.js code example]

I will provide videos demonstrating the cube removal and addition processes. It is evident that the red indicator is promptly updated when clicking in "Removal Mode", but experiences a delay in updating in "Add Mode".

I attempted a workaround by calling the checkIntersection function on the pointerup event, which did solve the issue temporarily. However, this is not the intended solution.

Logging the intersections array confirmed my suspicion that the new object is not being detected by the Raycaster. I also tried manually adding the new cube to the intersections object, but it did not resolve the problem.

It is perplexing why everything functions as expected in "Removal Mode" but encounters difficulties in "Add Mode". Could this be due to the immediate removal of the object from the scene?

There seems to be a missing piece in the puzzle. Despite the challenges, I believe there must be a solution, and I am determined to find it.

javascriptthree.jsraycasting

Answer №1

It seems that in order for the raycaster to function correctly, you need to either re-render your scene or update the matrix world:

// Option 1
renderer.render(scene, camera)
// Option 2: Call this after adding/removing objects to ensure raycaster works as expected
scene.updateMatrixWorld(true)

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

JavaScript Selenium code encountering an "Element not interactable" error with input textbox element

Currently, I am attempting to utilize Selenium in order to automate inputting a location into the search bar on weather.com. Initially, I wrote the code in Python and it seems to be functioning properly: // this works driver = webdriver.Chrome(ChromeDriver ...

javascriptpythonseleniumgetelementbyid

What is causing the "mb-3" class from Tailwindcss to malfunction with next/link?

The "mb-3" class from Tailwindcss in this Next.js component seems to have no effect in the Y direction. However, when using the "m-3" class, it also doesn't affect the Y direction, but instead has an impact on the X direction. impo ...

javascriptreactjsnext.jsjsxtailwind-css

Update information without the need for an xhr request in the back-end using jQuery

To keep notification updated with any changes in the database without causing a slowdown to the website, I implemented the following solution: HTML Code: <div id="myid">{{ $db_data }}</div> Back-end Request (utilizing Laravel): $db_data = A ...

javascriptjqueryajaxlaravel-5websocket

What is the process for the event loop moving into the poll phase?

There is a scenario outlined in the event loop explanation on the Node.js official website. When setTimeout is triggered, and the callback queue for the timer phase isn't empty, why does the event loop move on to the poll phase? The site mentions that ...

javascriptnode.jsevent-loop

Fetch information that was transmitted through an ajax post submission

How can I retrieve JSON formatted data sent using an ajax post request if the keys and number of objects are unknown when using $_POST["name"];? I am currently working on a website that functions as a simple online store where customers can choose items m ...

javascriptphpjqueryjsonajax

What is the process for adding images from CSS (backgrounds, etc.) to the build folder with webpack?

Trying out the file loader for processing images and adding them to my build folder. Images within HTML files successfully show up in the build, but the ones from styles do not. I've divided my webpack configuration into two separate files and use t ...

javascriptwebpackwebpack-file-loader

Is it possible to transmit a WebRTC frame to a Python script?

I recently built my first web app using Python and Django, which displays webcam frames of clients. 'use strict'; // For this project, I am only streaming video (video: true). const mediaStreamConstraints = { video: true, }; // Video element ...

javascriptpythondjangowebrtc

Learning to read HTML tags using JavaScript is a valuable skill

I've been struggling with a problem for some time now and I really need help fixing it. Here's the issue: I have an asp:GridView where I store text with HTML tags in my database under an English column. During the DataBound event, I use Context. ...

javascripthtmlasp.net

Toggle display of divID using Javascript - Conceal when new heading is unveiled

At the moment, I have implemented a feature where clicking on a title reveals its corresponding information. If another title is clicked, it opens either above or below the previously opened title. And if a title is clicked again, it becomes hidden. But ...

javascripthtml

Using async/await does not execute in the same manner as forEach loop

Here is a code snippet that I have been working with. It is set up to run 'one' and then 'two' in that specific order. The original code listed below is functioning correctly: (async () => { await runit('one').then(res ...

javascriptnode.jstypescriptasync-await

Navigating a Frame and Clicking a Link with Puppeteer: A Step-by-Step Guide

I am facing an issue with clicking on an anchor link within a page that is supposed to open a new tab for exporting a PDF. The problem arises because this link is located inside a frame within a frameset structure as shown below: https://i.stack.imgur.com ...

javascriptweb-scrapingpuppeteerframeset

initiating a submission upon the occurrence of an onchange event on an input field of type "file"

I have encountered an issue while trying to submit a form using the onchange event of an input element with type file. The problem is that it submits an empty form even when a file has been chosen. Here is the code snippet: var form = document.createElem ...

javascriptformssubmitonchange

Establish the following 13 steps to configure the initial server state and retrieve the client state

Currently, I have 13 applications and I am utilizing Zustand as my state manager. Below is a simple layout example: <MainProvider> <div className="min-h-screen flex flex-col"> <Navbar></Navbar> <main className ...

javascriptreactjsnext.jszustand

Maximizing the efficiency of React.js: Strategies to avoid unnecessary renders when adding a new form field on a webpage

Currently, I have a form that consists of conditionally rendered fields. These components are built using MUI components, react-hook-form, and yup for validation. In addition, within the AutocompleteCoffee, RadioBtnGroup, and TxtField components, I have i ...

javascriptreactjsmaterial-uireact-hook-form

Move each four-character IT value to a new line

const maxNumLength = 4; event = jQuery.Event("keypress") event.which = 13 $('#input').on('input focus keydown keyup', function() { const inputValue = $(this).val(); const linesArray = inputValue.split(/(&bsol ...

javascript

Developing a JSON structure from a series of lists

var data = [ [ "default_PROJECT", "Allow", "Connect", "Allow", "AddComment", "Allow", "Write", "Allow", "ViewComments", "Allow", "ExportData", "Allow", ...

javascriptarraysjson

sending a POST request with fetch

When it comes to making AJAX requests, I used to rely on jQuery in the past. However, with the rise of React, there is no longer a need to include the entire jQuery library for this purpose. Instead, it is recommended to use JavaScript's built-in fetc ...

javascriptajaxfetchaxios

Protractor performs the afterEach function prior to the expectations being met

I am completely baffled by the behavior of this code. Everything seems to be executing correctly up until the 'expect' statement, at which point it abruptly navigates to a new page and runs the afterEach function. I've tried various solution ...

javascriptangularprotractor

Issue with Tanstack React Query failing to import

Attempting to integrate tanstack react query into my current project to handle state management has proven challenging. Following a tutorial on using react query with nextjs 13, I thought I was following it correctly. However, I encountered various import ...

javascriptreactjsnext.jstanstackreact-query

Enhancing Angular 5 with CustomEvent Polyfill for JavaScript

After implementing the code snippet in main.ts file, I encountered an issue with CustomEvent not being added to the window object correctly. Strangely, when I manually add CustomEvent using the JavaScript console, it works fine. This problem arises specifi ...

javascriptangulartypescriptevents