Rotation Causes Vertices to Deviate from Expected Axis Movement

While moving the vertices of a shape on mouse move works well, applying a rotation to the shape causes the vertices to move along the wrong axis.

If you'd like to see the issue in action, check out this codesandbox.io link: https://codesandbox.io/embed/gatsby-starter-default-l16ui

To address the problem, focus on two key files - index.js in the page directory and shape.js in the components directory.

When moving your cursor around the screen, you'll notice the shape reacts, but not in the way you'd expect. To reset the rotation, set radiansY to 0 and observe the correct cursor interaction with the shape.

An update has been made: the Code Sandbox now features added vector conversion from world to local space in shape.js at line 47. However, this adjustment has caused all shapes to congregate in one spot.

const changedPoint = self.worldToLocal(point.clone())

javascriptthree.jsreact-three-fiber

Answer №1

Based on your explanation, it appears that you are adjusting the object in object space rather than worldspace. There are 2 potential solutions to consider: Object.localToWorld and .worldToLocal.

Before adding the movement vector to your object.position, try transforming it using object.worldToLocal(yourMovementVector).

Additionally, some suggestions regarding coding style:

Avoid unstructured code like this:

  const vertex1 = self.geometry.vertices[1].clone()
    if (originalV1 === undefined) {
      setOriginalV1(vertex1)
      mousePosition = vertex1.add(changedPoint)
    } else {
      mousePosition = originalV1.clone().add(changedPoint)
    }

This should be encapsulated within a function. Also, keep in mind that .clone() is resource-intensive. It's recommended to pre-initialize originalV1 and clone the geometry once instead of cloning each vertex individually since .clone() can handle that for you.

You may simplify the entire process with the following code snippet:

if(!originalGeometry)originalGeometry = geometry.clone()
for(let i=0;i<geometry.vertices.length;i++)
geometry.vertices[i].copy(originalGeometry.vertices[i]).add(changedPoint);
geometry.needsUpdate = true;

Consider that perhaps the intricate manipulation of vertices may not be necessary. You could create elongated cubes that extend far into the distance and adjust camera.far accordingly so they vanish realistically in perspective.

For reference, here is an example:

https://codesandbox.io/embed/threejs-simple-template-mousey-cubes-vmx91

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

Visible center of the HighMaps display

I want to display a map of the USA with only certain states visible, such as those on the east coast. Is there a way to resize the map area dynamically to show only the selected states? For example, when I try to display just the east coast states, the fu ...

javascriptgeohighmaps

Adjust the size of images using jQuery to perfectly fit the container dimensions

I am currently working on a script to automatically resize images that are too large for the container: $('img').each(function(i){ var parent_width = parseInt($(this).parent().width()), image_width = parseInt($(this).width()); ...

javascriptjquerycssimage

The functionality of socketio can only be activated within a function by utilizing the window.alert

I encountered a strange issue while working on my web development project using Flask and vanilla JavaScript. I'm attempting to create a basic chat feature with socketio. Strangely, the functionality only seems to work when I include a window.alert in ...

javascriptpythonflasksocket.io

The access-control-allow-origin header is failing to receive updates

I need help figuring out how to manually set the Access-origin header. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge& ...

javascriptexpress

Implementing a JavaScript function with parameters onto an element using backend code

Hey everyone, I've run into a strange issue while trying to pass string parameters to a JavaScript function from the code behind. Here is the current code snippet that I believe is causing the problem: thumbnail = "<a href = 'javascript:Remov ...

javascriptc#asp.net

do not continue loop if promise is rejected in AngularJS

I've attempted multiple methods, but still haven't found a solution to this issue. Within my code, there is a method called iterator that returns a promise; this method runs in a loop x number of times. If the iterator function returns a rejecte ...

javascriptangularjsfor-loopangular-promise

Issue: Encounter of an unexpected token (Please ensure that plugins are installed to import files that are not JavaScript) while using the rollup vue package

I am working on creating a Vue component library, but I encountered an error with my type checking. I attempted to update TypeScript as mentioned here, but it did not resolve the issue. Here is a snippet of my code and `package.json` file. My component cod ...

javascriptvue.jsrollup

Having trouble retrieving a value from a .JSON file (likely related to a path issue)

My React component is connected to an API that returns data: class Item extends Component { constructor(props) { super(props); this.state = { output: {} } } componentDidMount() { fetch('http://localhost:3005/products/157963') ...

javascriptjsonreactjs

AngularJS offers a single checkbox that allows users to select or

For my code, I need to implement a single checkbox. In my doc.ejs file: <tr ng-repeat="folder_l in folderlist | orderBy:created_date" > <td> <div class="permit"> <input class="chkbtn move_check" type="checkbox" id=" ...

javascripthtmlangularjs

"Visualizing data with Highcharts: Utilizing percentages in a basic bar chart

I am working on a basic 1-series bar chart with nominal values for each bar. While I am able to plot it with data labels and axis showing the value of each bar, my goal is to display the percentage of the total series on these labels while keeping the nomi ...

javascriptchartshighchartsnominal-data

Enhance the app.get response by integrating data fetched from an http.get request

Currently, I am utilizing express and passing the path as a URL parameter. app.get("/download", function (req, res) { var location; var options = { host: 'example.com', port: 80, path: req.query.url.replace(/ /g, ...

javascriptnode.jsexpress

Firefox throwing an error with jQuery URL Get requests

Could someone help me understand why my JavaScript function is triggering the error function instead of the success function in Firefox on Ubuntu? $(document).ready(function() { console.log( "Begin" ); $.ajax({ type: "GET", dataType: "ht ...

javascriptjqueryfirefox

Get a reference to pass as an injection into a child component using Vue js

Is there a way to pass a reference to child components? For example: The Parent component provides the ref: <template> <div ref="myRef" /> </template> <script> export default { name: 'SearchContainer', pr ...

javascriptvue.jsvuejs2

Dealing with 404 errors on dynamic routes in Next.js that are utilizing an API: A guide

I have a website built using a combination of React and Next.js on the client side, with APIs from an Asp.Net core server to fetch dynamic data like products and categories. The challenge I'm facing is figuring out how to redirect to a 404 not found ...

javascriptreactjsasp.net-corenext.js

What could be causing my Vue code to behave differently than anticipated?

There are a pair of components within the div. When both components are rendered together, clicking the button switches properly. However, when only one component is rendered, the switch behaves abnormally. Below is the code snippet: Base.vue <templa ...

javascripttypescriptvue.js

Comparing document.getElementById and the jQuery $() function

Is this: var contents = document.getElementById('contents'); The equivalent to this: var contents = $('#contents'); Considering that jQuery is present? ...

javascriptjqueryjquery-selectors

Setting up the Firebase emulator: should you use getFirestore() or getFirestore(firebaseApp)?

After delving into the process of connecting your app to the Firebase emulators like Firestore emulator, I came across the primary documentation which outlined the steps for Web version 9: import { getFirestore, connectFirestoreEmulator } from "fireba ...

javascriptfirebasegoogle-cloud-firestorefirebase-tools

Incorporate Javascript to smoothly transition a div into view, display it for a specified duration, gradually fade it out, and ultimately delete

I am excited to experiment with toast notifications by creating them dynamically. Each toast has a unique id number and I increment a counter every time a new one is created. The current functionality includes the toast sliding down, staying visible for 3 ...

javascriptjqueryhtmlcss

Tricks for preventing axios from caching in GET requests

I am utilizing axios in my React-Native application Firstly, I set up the headers function setupHeaders() { // After testing all three lines below, none of them worked axios.defaults.headers.common["Pragma"] = "no-cache"; axios.defaults.heade ...

javascriptnode.jsajaxreact-nativeaxios

Discover past stock prices on Yahoo Finance

I'm stuck on tweaking a functioning jfiddle example that I have. Can anyone help me with this two-part question regarding the jfiddle: http://jsfiddle.net/maxmillien/qPVSy/ Part 1) Is there a way to clear the search each time a new search is performe ...

javascriptjqueryjsonyqlyahoo-finance