Using Three.js to shift an object toward a specific point on a line and adjust its orientation with lookAt

I am working with a cuboid (such as THREE.CubeGeometry 1x1x10) and I have a specific goal in mind:

  1. My objective is to position the cuboid at a certain distance from the origin, along the line connecting the origin and a given point

  2. I also want to rotate the cuboid so that it faces towards the origin

I attempted to achieve this by using:

obj.lookAt(new THREE.Vector3(0, 0, 0));

However, this method ended up rotating the object in such a way that its side was facing the origin, rather than its end.

Regarding the first step (calculating a point N units away from the origin along that line), I am unsure where to start. My approach involved normalizing the vector with the point, essentially creating a unit length line from (0, 0, 0) towards the point. To move that point to the desired distance N from the origin, I thought of scaling that vector accordingly. Not sure if my logic is correct...

Edit

In response to a comment claiming how obj.lookAt() should function, here is what I observed and what I actually desire:

The current orientation of the cuboid after setting its position to a specific point and invoking lookAt()

It is worth noting that the side of the object is facing towards the origin (which is not my intention)

What I aim to achieve is for the object to face the point from its end (I believe I am one rotation away from achieving this, but I am uncertain how to calculate that)

javascriptthree.jsgeometrylinear-algebra

Answer №1

By using the method object.lookAt( 0, 0, 0 ), you can align the object's local z-axis towards the origin point.

For instance, if your rectangular prism measures 1x1x10 units, with the longest side running parallel to the z-axis, this approach will yield the desired outcome.

Software used: three.js version r.97

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

Disable the 'bouncy scrolling' feature for mobile devices

Is there a way to prevent the bouncy scrolling behavior on mobile devices? For example, when there is no content below to scroll, but you can still scroll up and then it bounces back when released. Here is my HTML structure: <html> <body> ...

javascriptjqueryhtmlioscss

having trouble adjusting the width of the buefy modal

Currently, I am working with vuejs alongside bulma and buefy. Specifically, I am utilizing the buefy modal feature and attempting to customize the modal width by utilizing its 'width' property. Thus far, I have attempted specifying the width in t ...

javascriptvue.jsbulmabuefy

What is the best way to ensure that my image completely occupies the div?

I am facing a challenge in creating a hero image that would completely fill the div on my webpage. Despite setting the width and height to 100%, the image seems to only occupy half of the space. Check out the CSS and HTML code snippet here. div.hero{ ...

javascripthtmlcss

Navigational packages for React applications

As I make decisions for my React project, I am considering which routing library to choose. Are there any alternatives to "react-router," "ui-router," and "react-navigation" that you would recommend? ...

javascriptreactjsreact-router

Using JavaScript or TypeScript to locate the key and add the value to an array

My dilemma involves an object structured as follows: [{ Date: 01/11/2022, Questionnaire: [ {Title: 'Rating', Ans: '5' }, {Title: 'Comment', Ans: 'Awesome' } ] }, { Date: 01/11/2022, Questionnaire ...

javascriptarraystypescriptobjectarraylist

Utilizing Angular routing in HTML5 mode within a Node.js environment

While I've come across other solutions to this problem, they all seem to have drawbacks. One option leads to a redirect, which could be disastrous for my front-end application that relies on Mixpanel. A double-load of Mixpanel results in a Maximum Ca ...

javascriptangularjsnode.jsexpressangular-ui-router

Steps for creating an asynchronous Redis subscriber invocation

My current setup involves a Redis server within AWS ElastiCache. I am publishing messages to a Redis channel and attempting to retrieve these messages through subscription using a JavaScript script as shown below: const redis = require("redis"); const sub ...

javascriptnode.jsredis

Events bound to JSX elements created in an array map are not being triggered by React

My current task involves working on a compact react + typescript (1.6) application designed for editing slideshows. The functionality of the app is straightforward. A sidebar on the left displays all existing slides, and upon clicking, a canvas appears on ...

javascriptreactjstypescript

What is the best way to display a message on the 403 client side when an email sending fails?

I am attempting to display an alert message when the email is sent successfully or if it fails. If it fails, I receive a 403 status code from the backend. However, I am unsure how to handle this error on the client-side. In the case of success, I receive a ...

javascriptnode.jsreactjsexpresspromise

Replicating the performance graph of Windows Task Manager

Looking for a JavaScript library that can replicate the dynamic chart seen on the CPU Usage History section of the Windows Task Manager's Performance tab. Any recommendations would be highly appreciated. ...

javascript

Having trouble with the input search function displaying the wrong date on the material date picker? You may need to convert it

I have customized the MomentDateAdapter to meet my specific requirements. Interestingly, when I choose a date from the calendar, the output is accurate. However, if I enter a date manually in the input field, the output is incorrect. When dealing with the ...

javascriptangularangular-material

Using inline C# in the browser as an alternative to Javascript: a step-by-step guide

Recently, I came across Microsoft's Blazor, a tool that enables running C# code in the browser. After checking out some tutorials, it appears that an ASP.NET Core backend server is required for it to function properly. It would be interesting if we co ...

javascriptc#asp.netblazor

Looking to add a dynamic divider between two columns that can be adjusted in width by moving the mouse left and right?

If you're looking for an example of two columns adjusting their width based on mouse movement, check out this page from W3Schools. I'm trying to implement this feature in my React app, but I'm unsure of how to proceed. Below is the JSX code ...

javascriptcssreactjsnext.js

Authentication with Laravel and Vue.js

After successfully implementing Laravel-Vue.js Authentication using Passport API, I am now able to obtain the token and send requests to api/user. Initially, I used the normal authentication process by sending data through a POST request to /login, which r ...

javascriptlaravelvue.jslaravel-5.5

"Aframe ensures that the camera's position is maintained when transitioning in and out of virtual

In the latest version of Aframe 0.8.*, the camera position is now controlled by the WebVR Manager. I'm curious if there's a way for me to create a component that will keep the camera in its current location when entering and exiting VR mode. It ...

three.jsaframe

Collecting data from Jitsi

After setting up a Jitsi server using packages, I am now trying to log connection statistics to a database. Specifically, I want to store data about significant bitrate changes during video calls. Although I have some familiarity with JavaScript and WebRT ...

javascriptjitsijitsi-meet

Feeling puzzled about the next() function in Node.js?

https://github.com/hwz/chirp/blob/master/module-5/completed/routes/api.js function isAuthenticated (req, res, next) { // If the user is authenticated in the session, call the next() to proceed to the next request handler // Passport adds this met ...

javascriptnode.js

What is the best way to divide my value sets using jQuery?

Within a given string such as 28_34/42/34,23_21/67/12,63_5/6/56, I am seeking to split or eliminate sets based on the ID provided. For example, if the ID is 23, then the set 23_21/67/12 should be removed. To achieve this, I am checking the value after the ...

javascriptjquery

Steps to send an asynchronous AJAX request to the server-side within the JQuery validation plugin using the addMethod() function

Currently, I am in the process of developing my own framework using the JQuery validation plugin to validate CRUD forms both client-side and server-side. It is crucial that these forms are not static but rather created dynamically using "handlebar.js". Fo ...

javascriptjqueryajaxvalidationjquery-validate

Using AngularJS to retrieve JSON data with the HTTP module

I am a beginner in the world of angularjs and I need some guidance. Below is the code I have written: <!DOCTYPE HTML> <html ng-app="myapp"> <head> <meta charset="utf-8"> <title>Angularjs project</title> <script type= ...

javascriptangularjsjson