Implementing object rotation towards a target using three.js

Even though I have been working with vector graphics for over 13 years now, I still find it challenging to grasp how three.js handles things. One thing I am trying to achieve is having an object that always faces the camera and rotates accordingly.

In another programming language, I was able to achieve this using the following code snippet:

// Create a vector pointing towards the camera.
temp.x = 0;
temp.y = 1;
temp.z = 0;
vec_rotate(temp, camera.pan);

// Apply the direction of the vector to the scene object.
vec_to_angle(entity.pan, temp);

// Rotate the scene object's angle around another angle or an imaginary line from the camera to the object.
ang_rotate(
    entity.pan, 
    vector(random(360), 0, 0)
);

However, despite using entity.lookAt(camera.position), I am still missing an angle rotation based on the current angle as shown in the last function call of the example.

Answer №1

To represent a fan in a model, you can create it using the following code:

const fanModel = new THREE.Mesh( ... );

const pivotPoint = new THREE.Object3D();
scene.add( pivotPoint );
pivotPoint.lookAt( camera.position );

pivotPoint.add( fanModel );

Then, during the animation loop (assuming the default orientation of the fan mesh faces the positive-z axis),

fanModel.rotation.z += 0.01;

Utilizing three.js version r.68

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

Discover and capture zip codes using javascript

Looking to extract zip codes from strings like "HONOLULU HI 96814-2317 USA" and "HONOLULU HI 96814 USA" using JavaScript. Any suggestions on how to achieve this? ...

Tips for setting up a hierarchical mat-table within a parent table that supports expandable rows using Angular Material

Here is the data that I am working with: [ { "_id": "c9d5ab1a", "subdomain": "wing", "domain": "aircraft", "part_id": "c9d5ab1a", "info.mimetype": "application/json", "info.dependent": "parent", ...

Nodejs is utilized to alter the data format as it is transferred from the client to the server

I'm encountering an issue with transmitting my data to the server using Node.js. I have a feeling that there are discussions on this topic already, but I'm unsure of what to search for to locate them... Here's a brief overview of my applica ...

Experiencing problems with the Datepicker and cloning functionality in JQuery?

This is the section of code responsible for cloning in JavaScript. $(document).on("click", ".add_income", function () { $('.incomes:last').clone(true).insertAfter('.incomes:last'); $(".incomes:last").find(".income_date_containe ...

Jquery ajax is failing to achieve success, but it is important not to trigger an error

My jQuery ajax request seems to be stuck in limbo - it's not throwing an error, but it also never reaches the success function. This is how my code looks: function delete() { $("input[name='delete[]']:checked").each(function() { ...

Using Firebase with Arrays in Javascript

Currently, my team and I are working on a project using Firebase with Vue.js as the framework. We've come across a challenge regarding creating, updating, and deleting elements in a Firebase cloud document. For instance, within our 'people&apos ...

modifying the state in a stateless React component

Hello everyone! I am here trying to work with hooks and I'm not sure how to achieve my goal. Here is the code I have: import React, { useState } from 'react' import { useForm } from 'react-hook-form' import {useDispatch } from &a ...

Postpone the appearance of a pop-up message, make it show up only once

Is it feasible to create a pop up that appears after 4 seconds and stays visible until the user interacts with the mouse? The pop up should not appear if the user scrolls before it shows. You can refer to the image for more details on the pop up box :) &l ...

Having issues installing Parcel through npm - Encountered an error while parsing package.json information

After creating a package.json file using the command npm init in my project folder, I proceeded to run npm i parcel --save-dev which resulted in an error message: C:\Users\XPRESS\Desktop\starter>npm i parcel --save-dev npm ERR! code ...

Searching and updating a value in an array using JavaScript

I need help solving a Javascript issue I'm facing. I'm working on an e-commerce project built in Vue, and I want to implement the selection of product variants on the client-side. The data format being sent to the backend looks like this: { & ...

Utilize JSON categories to assign groups to TextFields or Selects according to a JSON data attribute

I have retrieved multiple JSON groups from an API, each containing one or more questions objects. My goal is to display each question along with its corresponding response in a MUI TextField or Select component, based on the value of QuestionType. Current ...

"Modifying Code Aesthetics in WebStorm/IDEA: A Step-by-

Here is the code style I am currently using in my JavaScript project: var obj = { a: 1 , b: 2 , c: 3 } var arr = [ 'a1' , 'a2' , 'a3' ] const w = 1 , w2 = 2 , w3 = 3 The team claims they are following npm's co ...

Show the entire phrase within a Bootstrap modal with the help of jQuery, instead of just the initial

I have a PHP script that fetches a name from a database, and I'm using jQuery to display that name as HTML inside a Bootstrap modal when a button is clicked. However, the issue I'm facing is that when the name contains spaces, only the first word ...

Falling rain animation in JavaScript

I'm a beginner in the world of JavaScript and I'm trying to create a div on a webpage with a rain effect. I've managed to generate random blue points within the div, but I'm struggling to make them move downwards. Here's the code I ...

Choosing sub-elements in CSS

I am working with HTML code that dynamically creates div elements inside a main div using JavaScript. To easily change the styles of these inner divs after they are created, I have created a new class called "main-light" and utilize jQuery's addClass ...

excess white space appears in the mobile version

I recently completed a website using both materializecss and bootstrap platforms. While I know this may not be the best practice, it worked for my needs. However, I am facing an issue with the mobile view. When I reduce the viewport size, a margin appear ...

Ways to bounce back from mistakes in Angular

As I prepare my Angular 5 application for production, one issue that has caught my attention is how poorly Angular handles zoned errors. Despite enabling 'production mode', it appears that Angular struggles to properly recover from these errors. ...

Prevent accidental deletion of the entire document in mongoose (express.js) by selectively removing only a specific string from an array

Hey there, I'm new to this platform and my English isn't great, so apologies if I don't grasp all the nuances of my issue. I have a question about why the findOneAndDelete() method in Mongoose is deleting all documents instead of just delet ...

uncovering the secrets of tree shaking when using an npm package in conjunction with webpack

Imagine having an npm package where all components are exported from a single index.js file: export * from './components/A'; export * from './components/B'; Now consider another package that relies on this initial package: import {A} ...

During the Jasmine test, an error was encountered when trying to call a factory function that includes both a local and another function. The error message displayed

I have a factory with two functions and two local methods. I have written a Jasmine test case in which I expect the local method updateDetails and the factory function SavePref.savePref to be called when SavePref.saveDetails(values, prop); is invoked, as s ...