The Mysterious Behavior of ThreeJS Object3D.lookAt Animation

I am facing an issue while trying to animate the lookAt method of an Object3D to face a target Vector3. I am using a Tween function that changes floating points based on the scalarMultiplyVal (ranging from 0.0 to 1.0). However, no matter what approach I take, the Object3D is already looking at the target before the tween animation initiates, which doesn't make sense.

TweenMax.to( this, 5, {scalarMultiplyVal:1, onUpdate:function(){
            let targetVector = new THREE.Vector3( target.position.x, target.position.y, target.position.z ).multiplyScalar( scalarMultiplyVal );
            console.log( targetVector ) // logs "animating" x,y,z values as expected
            displayObject.lookAt( targetVector ); // does not animate. Already fully looking at target.position ( scalarMultiplyVal = 1.0 )
        }});

My goal is to smoothly transition my Object3D to align with a new vector3 periodically, but it seems like the Object3D is fixedly gazing at the target.position despite the vector multiplication operation being disregarded. Any insights or suggestions would be greatly appreciated!

Answer №1

To enhance your animation experience, I highly suggest utilizing Quaternion.rotateTowards() instead of using Object3D.lookAt(). This method, inspired by Unity's Quaternion.RotateTowards, internally executes a slerp operation which is perfect for your scenario. Take a look at the following example showcasing the usage of Quaternion.rotateTowards().

Explore more at:

Version: three.js R104

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

Implement a JavaScript confirm dialog for a mailto hyperlink

Is there a way in javascript to automatically detect mailto links on the page and prompt a confirmation dialog when clicked by a user? I came across a method on this website for displaying an alert message. My knowledge of javascript is very basic. It&ap ...

Unable to deploy Azure App Service due to difficulties installing node modules

My Azure Node.js App Service was created using a tutorial and further customization. The app is contained within one file: var http = require("http"); //var mongoClient = require("mongodb").MongoClient; // !!!THIS LINE!!! var server = http.createServer(f ...

Trouble with retrieving JSON data?

Struggling to access the JSON object issue: Received JSON Object: {"71":"Heart XXX","76":"No Heart YYYY"} I attempted to retrieve values for 71 and 72 individually but encountered compile time problems as: Syntax error on token ".71", delete this token ...

Why is my element still occupying space even though it has been hidden with a display of none?

Currently, I'm working on a dropdown navigation menu where one of the list items causes space issues when the display property is set to none. Specifically, the 'Book A Table' item isn't meant to be visible in the center div when the sc ...

What issues are present with the JavaScript event management in this scenario? (Specifically using the click() and hover() jQuery functions)

Currently, I am in the process of developing a proof-of-concept for a project that mimics Firebug's inspector tool. For more detailed information, please refer to this linked question. You can view an example page of my work which has only been teste ...

Why is the jQuery Ajax AutoComplete feature not functioning properly?

Hey there, I'm currently utilizing CodeIgniter along with Ajax AutoComplete for jQuery in my project. When setting up my autocomplete feature in jQuery, I used the following code: a = $('.city').autocomplete({ serviceUrl: "<? echo $ ...

Is there a way to use JSON.stringify() to post multiple arrays at once?

Trying to send multiple arrays to the controller using Ajax post. Initially, there is a model structured like this: public class EnrollmentOptionsVM { public virtual string OptionID{ set;get;} public virtual string UserChoice { set;get;} p ...

Servlet question: What causes the XMLHttpRequest responseText to consistently appear empty?

I've been going crazy trying to figure out how to solve this issue. I have a servlet deployed in Tomcat running on localhost:8080 that looks like this: @WebServlet(urlPatterns = { "/createcon" }, asyncSupported = true) public class CreateCon extends ...

What are the steps to integrating JavaScript functions into an HTML document?

Struggling with integrating a JavaScript function from one file into an HTML file? I'm having trouble getting it to work and suspect it has something to do with making the JavaScript accessible in the HTML. The function is meant to sum up values taken ...

Drawing unusual shapes using canvas arcs in Coffeescript

@.ctx.lineWidth = 20 @.ctx.moveTo(i.x, i.y) @.ctx.arc(i.x, i.y, 3, 0, Math.PI * 2) Can you explain how the code snippet above contributes to the image displayed? ...

JavaScript - Sort an array containing mixed data types into separate arrays based on data

If I have an array such as a=[1,3,4,{roll:3},7,8,{roll:2},9], how can I split it into two arrays with the following elements: b=[1,3,4,7,8,9] c=[{roll:3},{roll:2}]. What is the best way to separate the contents of the array? ...

Choosing onSelect is quicker than opting for click

Utilizing the autosuggestion plugin with the onSelect option that changes values in other fields is causing an issue. Everything works fine initially when selecting an item, but when clicking on the input field with the .auto class for the second time (whe ...

The `user-select: none` property displays distinct behavior in Safari

My Goal I am in the process of creating an input-like content editable div. The idea is to click on tags outside the div and insert them inside the div while still being able to type around these tags. The Issue and Reproduction Steps To prevent tag but ...

Having trouble accessing my API through localhost with NextJS

I'm currently working on an app that involves fetching data from my own API. The goal is to retrieve user-specific information and use it within the app. However, I've encountered a roadblock with CORS headers and I'm unsure of how to procee ...

Handle form submission response from an express server using JavaScript

(Please help me with my terminology if it's incorrect.) The files server.js, run.js and index.html are all located in the same directory. server.js This file is responsible for setting up the server. const express = require('express'); ...

Beware of potential infinite update loops when using a basic toggle function in Vue.js

I have been researching the issue of infinite update loops, but I am still struggling to grasp the concept. Despite my efforts, I keep encountering the following error message: [Vue warn]: You may have an infinite update loop in a component render functi ...

Errors encountered when using Input onChange with React and TypeScript: jsx no-lambda and no-bind issues

While creating a demonstration for a simple task, I encountered some challenges with the taskNameInput component. Despite my attempts, I kept encountering errors. How can I resolve these issues in React when using Typescript? You can refer to my GitHub re ...

When a link with the href attribute set to "#" is clicked while using hammer.js, it will smoothly scroll the page

Recently, I've been using Hammer in my JavaScript to attach events. Take a look at the code snippet below: $('.get-stats').each(function() { Hammer(this).on('tap', function(e) { //my code window.location.href=" ...

Assigning multiple values to a key within a JavaScript object

I have a task that needs to be completed as outlined below: $rootscope.$on('function', var1, var2, var3){ var renderObejcts = $('.launch').fullGrid({ events: function(zone1, zone2, callback) { //performing ...

The value of document.readyState remains as 'complete' even while the page is still actively loading on the frontend

Below is the code I implemented to verify if the page has finished loading: JavascriptExecutor js = (JavascriptExecutor)Driver; pageLoadStatus = js.executeScript("return document.readyState").toString(); Despite still visibly loading, the document.readyS ...