Dynamic Mesh modification and Raycasting in Three.js

When I clone a mesh from another mesh and then translate and rotate it, I encounter an issue with ray-casting. The point seems to be intersecting with the original position before translation and rotation. Here is a snippet of the code:

const raycaster = THREE.Raycaster()
const clonedMesh = originalMesh.clone()
clonedMesh.translateX(1)
clonedMesh.translateY(1)
clonedMesh.translateZ(1)
const quaternion = new THREE.Quaternion(
    -0.847,
    -0.002,
    -0.505,
     0.168
)
clonedMesh.applyQuaternion(quaternion)

const point = new THREE.Vector3(1,1,1)
raycaster.set(point, new THREE.Vector3(1,1,1))
const intersects = raycaster.intersectObject(object) // It's still intersecting with the original position

Any guidance would be highly appreciated. Thank you!

Answer №1

To resolve the issue after a transformation, make sure to call updateMatrixWorld() from the mesh. Thanks goes to @prisoner849

proposedModel.updateMatrixWorld()

The main reason is

An object's matrix contains its transformation in relation to its parent; to obtain the object's transformation in world coordinates, you need to access the object's Object3D.matrixWorld.

If either the parent or the child object's transformation changes, you can update the child object's matrixWorld by calling updateMatrixWorld().

For more information, visit

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

Clickable Parent URL in Bootstrap 5 Dropdown

I'm currently working on creating a Bootstrap 5 Navabar with a dropdown that appears on hover and allows the parent item to be clickable on screens larger than 992px. Successfully implementing the show on hover feature with the following JavaScript: ...

Invoke a handler from one function within another function

I am unsure of the best approach for achieving this, or if it is even feasible, but I have two components: a main navigation bar (NavBar) that spans across the top of the page, and a sidebar drawer. NavBar: export default function NavBar() { const c ...

Tips for uploading a file with AngularJS using the multipart/form-data format

Looking for guidance on uploading an image using AngularJS with a REST API that requires Content-Type:multipart/form-data. Content-Type:multipart/form-data www.abc.com/images/id Request Body { // --Boundary_1_1626119499_1392398808202 // Conten ...

When dynamically loaded HTML is involved, Javascript ajax calls often fail to execute properly

Currently, I am in the process of creating a JavaScript script that can facilitate clicking through <a href> links by only replacing the inner HTML instead of reloading the entire page. The interesting thing is, it seems to be functioning properly, e ...

What is the best way to show a tooltip alongside highlighted text?

How can I display a tooltip (using qTip) next to selected text? The code below captures the selected text in the console, but the tooltip is not displayed. <div class='test'>Actual text will be much longer...Test Test Test Test Test Test T ...

Saving file with HTML download button results in only HTML document being saved

I am attempting to include a "download file" button on my gatsby website as shown below: <a href="../../images/project-logos/placeholder-company-logo.png" download="test" className="responsive-square project-logo" > <img sr ...

Implement Spacing Between Components in React Native

Seeking assistance in resolving the issue of overlapping views within my react native app, specifically requiring spacing between them. Upon clicking the plus sign twice in the top right corner, the two Views overlap without any space between them (referr ...

Is it possible to utilize the return value from an asynchronous function within useEffect as the default value for useState

Check out this simple example I've put together https://codesandbox.io/s/4zq852m7j0. In the example, I am fetching data from a remote source and attempting to use the returned value as the input for my textfield. const useFetch = () => { const ...

The functionality of Selection.modify is unfortunately limited when it comes to input and textarea elements in Firefox

Check out this demonstration (jsfiddle link): const input = document.querySelector('#input'); const textarea = document.querySelector('#textarea'); const div = document.querySelector('div'); const x = (e) => { if (e.ke ...

A guide on verifying discrepancies between selected record data in two tables

How can I validate if the data of selected records is mismatching in two tables? I need to select a few records in each table. Upon clicking the Match button, if the currencies are not the same, we need to display an alert saying "Data mismatched". I have ...

Tips for efficiently handling multiple form inputs using PHP

As part of my project, I am designing an admin panel for a distribution company. They have specifically requested a feature where they can input orders for all clients through a single page. To meet this requirement, I have created a dynamic form that gene ...

Is it possible to replicate an HTML table using JavaScript without including the headers?

Discover a JavaScript snippet in this stack overflow post that allows you to create a button for automatically selecting and copying a table to the clipboard. When pasting the data into an Excel template, my users prefer not to include the header informat ...

Issue with create-react-app and express server not displaying correctly in Internet Explorer

My application functions perfectly with Chrome and Safari. It utilizes React for the front-end and Express for the back-end. However, when I try to open it in Internet Explorer, all I see is a blank white page. Additionally, I encounter this error message: ...

Numerous criteria for selecting a checkbox

I am working with a student database table called student_db, which looks like this: Name Gender Grade City John Male 2 North Dave Male 4 North Garry Male 3 North Chirsty Female 5 East Monica Female 4 East Andrew Male ...

How to modify a Python script to print in a specific div element instead of the Chrome console?

Currently conducting preliminary tests on executing a Python script within a Chrome extension. The code provided below is functional, but I am seeking assistance on how to display the value in a div element instead of logging it to the console. Unfortunate ...

Loading input datalist in Firefox postponed

My goal is to implement an input field for a username that allows users to select from a wide range of names/usernames. I want them to be able to enter a partial string from the name or username. Instead of loading the entire list initially, I aim to load ...

When using VSCode for Next.js projects, automatic imports from "react" are not supported

* While similar, this question is not a duplicate of this other question; the solutions provided there are tailored for TypeScript and do not seem to apply to JavaScript. In my current project using Next.js in Visual Studio Code, I am facing an issue wher ...

Spontaneous gradient background occasionally failing to load as expected

My to-do list is simple and functional, but I'm encountering an unusual issue with the background. The background is supposed to be a random gradient set using JS upon loading the HTML, but sometimes it doesn't apply at all. If you refresh the Co ...

An effective way to determine the size of a browser through javascript

In an effort to enhance the responsiveness of a website, I have included the following code snippet on one of my pages: document.write(screen.width+'x'+screen.height); However, I am encountering an issue where the code displays my screen resolu ...

Having trouble with the jQuery slideUp function?

Exploring some jQuery features for a trial run, I stumbled upon an unusual behavior. Perhaps someone in this forum can provide some insight. Keep in mind that this is all just test code, so please overlook any messy aspects. Currently, I am working with ...