Using ThreeJS to rotate an object towards a different vector3 position

In my project, I am working with an array of Vector3 that represents a path to be drawn.

For each consecutive point in the path, I need to determine the direction it will take - either straight, left, or right if the angle is steep enough.

Approach taken so far

I attempted to create an Object3D for every vector in the array and then aligning it (using lookAt) towards the next vector. However, I encountered an issue where the rotation of the temporary object became NaN.

To address this problem, I set up two Object3D instances to retrieve the world position of the second object.

Expected outcome My goal is to calculate and store the angle, in radians or degrees, of each Object3D to determine its corresponding direction.

const path = [
    { "x": -2.47, "y": 0, "z": 7.61 },
    { "x": -2.14, "y": 0, "z": 6.63 },
    { "x": -1.09, "y": 0, "z": 2.33 },
    { "x": -1.06, "y": 0, "z": 0.8 },
    { "x": -1.83, "y": 0, "z": 0.71 },
    { "x": -9.12, "y": 0, "z": 0.39 },
    { "x": -9.48, "y": 0, "z": -0.66 }
]; 

if (path.length > 2) {
   let index = 0;
   const pathSegments = Math.floor(path.length / 2);
   for (let i = 0; i<pathSegments; i++) {
      const v1 = path[index];
      const v2 = path[index+1];

      // Create temporary object
      const tempObject = new THREE.Object3D();
      tempObject.position.set(v1);
      tempObject.lookAt(v2);
      console.log(tempObject.rotation);
   }
}

I suspect there may be a more efficient way to approach this task. Any guidance or suggestions would be highly appreciated!

Answer №1

Ensure that the elements in your path array are of type THREE.Vector3. Additionally, note that Vector3.set() does not accept a THREE.Vector3 instance as an argument. Instead, consider using either the following method or THREE.Vector3.copy():

tempObject.position.set(v1.x, v1.y, v1.z);

Implementing this change should resolve the NaN issue.

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

Updating the legend boxes of a chart in Chart Js to match the style of the graph lines

I need assistance updating the legend boxes of my graphs with graph line style. https://i.sstatic.net/zhi4L.pngActual Consumption https://i.sstatic.net/dAjlp.png Average Use https://i.sstatic.net/YMC7I.png Here is the code snippet I am currently using, ...

Bringing Angular ECharts into a Stackblitz 15.1 setup: A How-To Guide

Recently, Stackblitz made a change to use a standalone configuration for Angular Projects. However, when trying to initialize the module for Angular ECharts (ngx-echarts), an error occurred: Error in src/main.ts (18:5) Type 'ModuleWithProviders<Ngx ...

How can I use Bootstrap to toggle the visibility of one dropdown menu based on the selection made in another dropdown menu?

I tried using the toggle technique, but it didn't meet my expectations. <div class="btn-group col-sm-2 col-md-2 col-lg-2"> <label>Patient Type</label> <button class="form-control btn btn-primary dropdown-toggle" data-tog ...

Having trouble with the response function not functioning properly within an AJAX autocomplete

I have implemented an autocomplete feature using the jQuery UI plugin from http://jqueryui.com/autocomplete/#remote-jsonp. $("#city" ).autocomplete({ source: function( request, response ) { $.ajax({ url: 'index.php?secController= ...

Sending a volatile emit to a specific namespace using SocketIO

An issue is arising with the following code snippet, resulting in the TypeError: Cannot read property 'volatile' of undefined (in other words, map does not have a volatile emit method): io = require("socket.io").listen(server) map = io.of "/map" ...

Automate Facebook Photo Untagging using JavaScript

After spending hours working on it, I want to create a JavaScript routine that can automatically untag me from photos on Facebook. My plan is to run this in the Firebug console so I can untangle myself from all Facebook photos, as there's no way to do ...

Hover and Click Card Turning

My card can both hover and click, but there seems to be a small glitch. After clicking on the card and then moving the cursor away from the front, the hover effect doesn't work correctly. It immediately flips back to the front side. The hover effect ...

What is the best way to make the Icon clickable so that it can be used to modify the value within the Input field?

Within the Input container, there is a name that can be renamed by clicking on the CreateIcon within InputAdornment. However, I would like it so that the name is only changeable when clicked around the text, not just anywhere. Check out the code here. con ...

Developing a jQuery loop

I am in the process of creating a function that will change the background color (color A), box color (color B), and text color (color A) when a user clicks on the refresh button. I have already defined an array called 'colors', but I am struggli ...

Setting bootstrap datetimepicker values dynamically from a variable

I'm trying to utilize the inline bootstrap datetimepicker from At the moment, it opens in a popup window after the user selects a date/time from a table on another page. My goal is to pass the date/time from that page into datetimepicker and have it ...

Having difficulty highlighting text within a div using Three.js

After successfully creating a 3D interactive animation using Three.js, I added a Div element that hovers above the rendered objects in space. To ensure I can select text inside this Div, I adjusted the z-index property to a higher value. However, I encou ...

Are there any debugging tools specific to Internet Explorer for JavaScript?

I need a reliable JavaScript debugger for Internet Explorer. I have tried using Firebug Lite, but it doesn't seem as detailed as the original Firebug when it comes to displaying JavaScript errors. Does anyone know how to pinpoint JavaScript errors in ...

The close button within the modal is malfunctioning even with the implementation of the on() function

My "show more" button triggers the modal to pop up, but when I click on the X button in the top left corner, it doesn't close as expected. However, clicking outside of the box or pressing the "esc" key does work. I suspect that the issue lies with th ...

Having difficulty accessing and modifying child elements

I am encountering an issue where the 'remove' property is showing as undefined when I try to add or remove a class on an element. Upon inspecting the parent element using element.parentNode, I can see that there are child span elements present. H ...

What steps are necessary to configure .eslintrc to identify the use of 'require'?

I recently started using ESLint and successfully integrated it with IntelliJ. Initially, ESLint did not recognize node out of the box. After consulting the documentation, I created a configuration file named .eslintrc at the project's root folder, sp ...

The Socket.io client establishes connections with multiple servers simultaneously

Imagine this scenario: I am using nodejs and socket.io, and a question comes to mind. What would happen if one client establishes connections with multiple servers like this: socket = io.connect('http://server1') //600k sockets already connecte ...

Troubleshooting Issues with https.request and Options in NodeJS Leading to Connection Resets

When working with NodeJS, I noticed that my code performs as expected when using https.get() to retrieve responses. However, the moment I make the switch to https.request() along with requestOptions, I encounter a connection reset error along with the foll ...

The react-router-dom seems to be malfunctioning, so let's simply render the "/"

Struggling to render multiple pages in React, I am a newbie and have been exploring various tutorials and pages. My stack includes React, Webpack, Babel, and ESLint with Airbnb configuration. When I render my React app, it appears like this. View of the ...

Steps for releasing a third-party library that is compatible with both Angular 2 and Angular 4

Currently, I am utilizing a third-party library for Angular that is compatible with Angular 2. However, I want to make sure this library can support all versions of Angular, including Angular 4 and Angular 5. How can I go about publishing an updated vers ...

Fetching post value via AJAX in Codeigniter views: A step-by-step guide

Having issues receiving Ajax response as it is coming back null. The HTML layout includes: <form method="post" action="<?php $_SERVER['PHP_SELF'] ?>"> <select class="form-control" class="form-control" id="choose_country"& ...