Rotating Points in Three.js

I'm currently experimenting with a particle system project and I would like to incorporate a slight delay in the rotation of my Points Object in three.js. At the moment, I am using D3.js linear scale which results in a 1:1 rotation. This means that if you quickly move your cursor all the way to the right, my Points Object will move at the same speed as your cursor. However, I am looking to introduce a smoother rotation effect where the rotation completes approximately 1 second after your cursor reaches the far right. Below is the snippet of my current code.

var rotYScale = d3.scale.linear().domain([0, window.innerWidth]).range([25,-25]);
var rotXScale = d3.scale.linear().domain([0, window.innerHeight]).range([15,-15]);
d3.select("body").on("mousemove", function() { 
  particleSystem.rotation.y = rotYScale(d3.mouse(this)[0]) * Math.PI / 180;
  particleSystem.rotation.x = rotXScale(d3.mouse(this)[1]) * Math.PI / 180; 
});`

Answer №1

After some trial and error, I was able to achieve success with the help of Tween.js. Here is the additional code that made it work:

let animate = new TWEEN.Tween(object.rotation).to({ x: newX, y: newY, z: 0})
animate.easing( TWEEN.Easing.Quadratic.Out)
animate.start();

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

How can multiple arguments be passed to a function using JQuery's post method?

I can't seem to figure out how to pass multiple arguments to a function using jQuery's post method. It might sound like a silly question, but I'm struggling with it. Currently, my code looks something like this: $.post("<?php echo site_ ...

Issue arises when isomorphic-dompurify is used alongside dompurify in Next.js 13 causing compatibility problems

I am currently facing a compatibility problem involving isomorphic-dompurify and dompurify in my Next.js 13 project. It appears that both libraries are incompatible due to their dependencies on canvas, and I am struggling to find a suitable alternative. M ...

Apply a specific image layout once the drop event occurs

I have a container with 5 image pieces that need to be dropped into another container to complete the image. Once an image is dropped, I want to apply the style "position:absolute" so that it sticks to the previous image in that container. Although I have ...

I am unable to connect my jQuery

I've searched far and wide on numerous coding forums for solutions to this issue. It's usually just minor syntax mistakes like forgetting a closing tag or improper src attribute formatting. Despite double-checking, my html and js seem to be erro ...

Learn how to utilize Jquery to create a dynamic slide effect that toggles the

I am looking to change a banner on click functionality. Currently, I have hidden the 2nd banner and banner 1 is displayed. When the arrow is clicked, I want banner 1 to hide and banner 2 to show. The challenge is that I attempted using HTML for this task. ...

What is the best way to align an InputAdornment IconButton with an OutlinedInput in Material-UI?

Struggling to replicate a text input from a mockup using Material-UI components. Initially tried rendering a button next to the input, but it didn't match. Moving on to InputAdornments, getting closer but can't get the button flush with the input ...

Updating the JSON format output from snake case to camel case in a React web application

Modifying JSON output in a React Web app to change keys from snake case to camel case Currently, the API endpoint response is structured like this: [ { "id": 1, "goals_for": 0, "goals_against": 0, "points": 0 } ] ...

Encountering an issue while attempting to transfer information between screens, receiving the error message: TypeError - undefined is not an object when evaluating 'route.params.item'

Currently facing an issue with my home screen where I am trying to navigate to the reviews screen with title, rating, and body. Previously, everything worked fine using const { item } = route.params;, but now I am encountering a TypeError: undefined is not ...

Save multiple form values within a single cookie

As someone who is new to JavaScript, I am seeking some guidance. I came across a code snippet online that allows for saving form input values in separate cookies: function storeValues(form) { setCookie("field1", form.field1.value); setCookie( ...

Fetching URL from Right Before Logging Out in Angular 2 Application

I am struggling to capture the last active URL before logging a user out of my Angular 2 app. My goal is to redirect them back to the same component or page once they log back in. Currently, I am using this.router.routerState.snapshot['url'] to r ...

Utilizing HIGHCHARTS to effectively access PHP variables from a separate PHP file through Jquery/Ajax

I am facing an issue with accessing PHP variables from my main page in a PHP file called by AJAX. Is there a way to access these variables or should I include the PHP file in the one called by AJAX? PHP : variables.php <?php $myServername = "loca ...

The requestify Node module encounters issues when the body contains special characters

My current project involves the use of node.js and a library called requestify. Here is the snippet of code causing some trouble: console.log('body'); console.log(body); return new Promise(function (f, r) { requestify.request(myurl, { ...

Utilizing Jquery's .load function will temporarily deactivate all other functions

Season's Greetings everyone! I have a unique personal messaging system on my website that utilizes jQuery for message display and manipulation. Let's delve into the specific file that controls this functionality: <!-- Fetching and displaying ...

An error occurred when trying to set a cookie using Set-Cookie in a react application

Currently, I am immersed in a small project that involves user authentication via email and password before gaining access to their individual profiles. The backend operates on cookies which are established once the correct email and password combination i ...

Sending auth0 token as a parameter in $http.get request in Angular

I am encountering difficulties when trying to attach the auth0 token to a http.get request for an API that requires the token. The token is generated upon user login and stored in the browser's local storage, which is functioning properly. The challen ...

altering the directory for bower installations on specific repositories exclusively

Recently, I've been experimenting with Bower and at the same time exploring Polymer. If you want to download polymer elements using bower, you can use the following command: bower install --save PolymerElements/iron-image I assume there's a sp ...

The function get() in p5.js will provide you with an array of pixels that is empty

I am currently working on a project that is inspired by this particular video. Within p5.js, I have been utilizing the get() function. My goal is to divide a large tileset into smaller images and store them in an array. However, I have encountered an issue ...

Oops! An unexpected field was encountered while trying to use the uploadMultiple function from dropzone.js

I was looking for a way to allow users to select images to accompany their reviews. That's when I came across dropzone.js. However, I encountered an issue when trying to send multiple images in one request. I expected the req.files to contain an arra ...

The state remains unchanged when useState is invoked

I am currently designing a unique restaurant website template. As part of the project, I have implemented a modal box with two arrow buttons to navigate between pages. The issue I am facing is that the value of the pageNumber variable, tracked using useSta ...

After Effects Script: Apply various character styles from main text to subtext

I'm currently working on an After Effects script that can transfer the style and text of a text layer to another text layer in a different comp. The script works perfectly if the parent text layer only has one style, but I need it to handle a situatio ...