Turning on the y-axis in ThreeJS to align with the camera

I am attempting to make my object continuously face the camera on the Y axis, similar to how a person would turn in circles as the camera moves.

Here is the code snippet I have tested so far:

var render = function() {
    animationFrameId = window.requestAnimationFrame( render);

    obj.lookAt(camera.position);

    obj.rotation.set(0, obj.rotation.y, 0);
}

However, I seem to be overlooking some fundamental math or trigonometry calculations because during rotation, there comes a point where the object 'jumps' and faces the wrong direction.

Answer №1

To make an object look at the camera from all directions using .lookAt, you need to determine the angle on the Y plane between the camera and the mesh like so:

var updateRotation = function() {

    requestAnimationFrame(updateRotation);    

    object.rotation.y = Math.atan2((camera.position.x - object.position.x), (camera.position.z - object.position.z));

}

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

The error message in angular.js line 13294 indicates a problem with an unknown provider called cityResourceProvider, which is required by cityResource and cityListCtrl

I'm having my first experience with angularJS and trying to use services and factories to create a web api REST call. I encountered this error message even before making the call: angular.js:13294 Error: [$injector:unpr] Unknown provider: cityResour ...

What is the best way to implement 2 conditions in the componentDidUpdate method?

Is there a way to include two conditions in an "if" statement within the componentDidUpdate method? Below is the code I am working with: componentDidUpdate(prevProps, prevState) { if ( prevState.address_id !== this.state.address_id && ...

Problem with AngularJS function execution - require a delay in executing the second function

I am developing a small utility in AngularJS to manage the shopping cart for users. Here is the code snippet from my cart-service.js file: var myStoreCartService = angular.module("myStoreCartService", []); myStoreCartService.factory('Cart', fu ...

JavaScript newbie diving into the revealing module pattern

Currently diving into Addy Osmani's fantastic read on javascript design patterns, however, I'm facing a roadblock. Can someone help me identify the issue with my approach? (I'm experimenting with Raphael for fun): var myPaper = Raphael(&apo ...

What is the best method to retrieve the country name from a world map using D3.js?

I'm trying to figure out how to retrieve the country name from a click event on the D3 world map. Despite inspecting the DOM, I can't quite understand how the country's name, code, or population is associated with the map. The template for ...

How should one go about organizing the JavaScript code for a complex application?

Imagine you are working on a complex project with extensive use of JavaScript throughout the site. Even if you divide the JavaScript into one file per page, there could still be around 100 JavaScript files in total. What strategies can you implement to ma ...

Dilemma: Navigating the Conflict Between Context API and Next.js Routing in React

Recently, I was following a Material UI tutorial on Udemy and decided to set up a Context API in Create React App without passing down props as shown in the tutorial. Later on, when I tried migrating to Next JS with the same Context API, I started encounte ...

Tips for simultaneously updating a value in multiple collections on firestore?

Currently, I am in the process of developing a forum application using Vue, which is essentially a replica of this platform. In this app, users can post questions, receive answers to those questions, and leave comments on those answers. Each question, answ ...

Assigning nested JSON values using Jquery

My JSON data structure is as follows: { "Market": 0, "Marketer": null, "Notes": null, "SalesChannel": null, "ServiceLocations": [ { "ExtensionData": null, "AdminFee": 0, "CommodityType": 0, ...

Listening to multiple events in a row from various objects

I am currently in the process of developing an iOS app using Titanium. Within my app, I have a tableview that consists of two images and various labels on each row. My goal is to allow users to click on either of the images to swap them with other images, ...

Uncovering settings from React components

Within my React component, I am dynamically generating input fields based on a configuration array object: const SomeComponent = (props) => { const [clientId, setClientId] = React.useState('') const [clientName, setClientName] = React.use ...

Executing JavaScript code from a web browser in Node.js

I have created a simple JavaScript code in AngularJS and I would like to be able to execute it in both Node.js and the browser depending on the situation. While I am aware of the tools like browserify or lobrow that allow running Node.js code in the brows ...

The Flask server push appears to be functioning correctly, yet the EventSource.onmessage event is not triggering as expected

My implementation includes a route /stream that is designed to push the string 'test' every second. Upon accessing this URL (localhost:12346/stream) on Chrome, I observed that it opens a blank page and adds "test" to the page every second. This ...

What is the best method for invoking a JavaScript function when the view changes in AngularJS?

On the transition from one AngularJS view to another, I am looking to execute a few JavaScript functions such as a placeholder fallback. Is there a way to accomplish this on a global scale? ...

Verify the requests in node.js with Wordpress authentication

I am working on building a web application that consists of both a Wordpress site and a node.js application. I specifically chose to use Node because of the capabilities of socket.io, while Wordpress serves my needs for many other reasons. It's essent ...

Creating a Popup with JS, JQuery, CSS, and HTML

Seeking assistance in creating an HTML, CSS, and JS/jQuery popup. Looking to have a button that reveals a div tag when clicked, which can also be closed. Any quick responses with solutions would be greatly appreciated. Thank you in advance! ...

Karma and RequireJS fetching files beyond the base URL

My goal is to set up automatic testing using karma with the following file structure: /assests /css /font /img /js /collection /lib /model /plugin /spec /view test-main.js main.js /templates index.html karma.conf.js In my ...

What is the best way to reposition the origin of the canvas to the center?

As a beginner in html and JavaScript, I am currently working on a program that involves points and lines in a coordinate system. However, the canvas for html5 has its origin at the upper corner, and I need to create a coordinate system with the origin at ...

Issue with Jquery/Js function not performing as expected

This Javascript function is really effective in adding and removing form elements. However, I have noticed that it does not remove the class "input-group col-md-12 row" when an element is removed. I would like to modify it so that it also removes that cla ...

Bootstrap 5 dropdown list item not responding to click event

I am attempting to implement a click event on bootstrap 5 dropdown items using Javascript, specifically jQuery. However, I am facing an issue where the event is triggered not upon clicking but rather when the page initially loads. Here is a sample code: & ...