Using Tween animations with Three.js

I have some queries regarding tween js within three.js. Below is the code snippet where the particles are generated as shown in the image:

Image 1

// Code snippet for initializing
var scene;
var renderer;
var container;
var stats;
var sphere;

// Omitted duplicate sphere declarations

init();
animate();

function init() {
    // Initialization code here
}

// Tween function to handle window resizing
function onWindowResize() {
    // Resizing logic here
}

// Touch start event handler
function onDocumentTouchStart(event) {
    // Touch handling logic
}

// Mouse down event handler
function onDocumentMouseDown(event) {
    // Mouse click handling logic
}

// Click event handler
function onDocumentMouseClick() {
    // On click animation logic
}

// Animation movement function
function animatemove() {
    // Movement animation logic
}

// Main animate function
function animate() {
    // Main animation loop
}

// Render function
function render() {
    // Rendering logic
}

After this section, the code handles tweening for particle movement upon clicking them. However, it seems that the particles are not tweening correctly. Can you provide insights on what might be missing from the code or what issues might be causing this problem?

// Remaining code snippets continue...

Answer №1

To improve your code, consider defining start and end objects and incorporating an "onUpdate" callback function.

Here is a revised version that should work effectively:

let animationParams = { 
     x:intersects[ 0 ].object.position.x,
     y:intersects[ 0 ].object.position.y,
     z:intersects[ 0 ].object.position.z
}

new TWEEN.Tween( animationParams )
    .to( { x: Math.random() * 20,  y: Math.random() * 20, z: Math.random() * 800 - 400 }, 2000 )
    .onUpdate(()=>intersects[ 0 ].object.position.set(animationParams.x, animationParams.y, animationParams.z))
    .easing( TWEEN.Easing.Elastic.Out)
    .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

Leaving the pipeline of route-specific middleware in Express/Node.js

My implementation involves a sequence of "route specific middleware" for this particular route: var express = require('express'); var server = express(); var mw1 = function(req, resp, next) { //perform actions if (suc ...

Testing the ControllerAs syntax when dealing with forms in AngularJS

I am currently facing a situation with Angular that has left me quite puzzled. Controller function Controller () { // form used in template this.form ... } Template containing a form and utilizing the above controller Template <div ng-contr ...

Managing the display of numerous ngFor components

If you're interested in learning more about the features I will include, here's a brief overview. I plan to have a project section with cards displayed for each project, all populated from a JSON file. When users click on a card on the website, a ...

Using Thymeleaf within Javascript code to generate a URL?

Here is my question: The project's base URL is : The test page URL is :, and on this page, I have included a JavaScript file called datatable.packer.js using the following code: <script type="text/javascript" th:src="@{/resources/js/datatable ...

What is the best way to format a string into a specific pattern within an Angular application

In my Angular component, I have 4 fields: customerName, startDate, and startTime. Additionally, I have a fourth field that is a textarea where the user can see the message that will be sent via email or SMS. Within my component, I have defined a string as ...

How can I make the arrows work on a secondary slider with EasySlider1.7?

I finally managed to get 2 sliders working on my page after reading through several other tutorials. However, I am facing an issue with the Prev & Next arrows on the second slider as they don't seem to work properly. I inherited this page from someon ...

Can an internal/private function call a public function?

Just wondering if I'm missing something here, as I tried the following: (function() { var thing = function() { var doIt = function() { console.log("just do it"); this.updateValue(5); }; return { ...

Passing a Typescript object as a parameter in a function call

modifications: { babelSetup?: TransformationModifier<babel.Configuration>, } = {} While examining some code in a React project, I came across the above snippet that is passed as an argument to a function. As far as I can tell, the modifications p ...

Struggling to access the "this.array" variable within a TypeScript-powered Angular 4 application

I cannot access the this.array variable in my TypeScript-Angular 4 application. The error is being thrown at this.services.push because this.services is undefined. My code looks like this: export class ServersComponent implements OnInit { //Initializi ...

Dropbox menu within an extended webpage

I am looking to create a dropdown menu that behaves like the one on this website. The goal is for the dropdown to cover the entire webpage, hide the scroll bar, and "unmount" the other elements of the page, while still displaying them during the transition ...

How to Implement Force Unmount in Vue 3 When Deactivated

I've developed a VUE app that makes use of the keep-alive method in the router. There are multiple pages that should only be loaded once, but certain specific pages need to be reloaded every time they are activated. <template> <router-view ...

The Chrome (version 58) webdriverio is currently inactive, while Firefox is up and running

Previously, I successfully ran automation tests on Firefox and Chrome locally. However, there seems to be an issue that has arisen when trying to run them on Chrome recently. My system configurations: Operating System: Windows 10 (64-bit) Chrome Versio ...

Encountered a parsing error when attempting to integrate SCSS with webpack and babel setup

I am facing an issue while trying to integrate SCSS into my webpack and babel setup. When running npm run build, I encounter an error that I'm unfamiliar with. As a beginner in using webpack and babel, I'm unsure about the necessary changes requ ...

Canvas does not display any results when trying to integrate Shadertoy

While browsing through StackOverflow, I came across a post detailing how to transfer shader examples from ShaderToy into Three.js. You can find the post here. I followed the steps mentioned in the post and created this Plunker demo. The fragment shader co ...

Having trouble with implementing the Drag API Function alongside Javascript Arrow Functions?

I've searched extensively for a similar question but couldn't find one, so I hope this is not a duplicate. Recently, I created a factory function to assist me with drag and drop functionality in my current project. However, I noticed varied beha ...

Having trouble with downloading a node module?

I encountered an issue while trying to download the node-sass node module. The error message I received was as follows: To download the node-sass module, use the command: npm install --save-dev node-sass Error Binary has a problem: Error: \?\C: ...

Convert the class to a file upload using jQuery

I am currently working on a project involving a file upload script. I have multiple directories where the files need to be uploaded, and I'm attempting to use a single form for this purpose. So far, I have been able to change the form class using jQu ...

When trying to search for 'elForm' using the 'in' operator within the context of a "datetime" type, the error "Unable to find 'elForm' in undefined" occurs

I am attempting to implement a datepicker with time options from Element UI. I am encountering an issue within the ElementUI component. It functions correctly if the type option is set as date, but throws an error with datetime. Below is my code snippet an ...

Ways to navigate back to the previous ajax request

I am currently working on a script that involves numerous ajax requests. The script is functioning well, and it features dynamic content that changes based on user selections or search inputs. I have been exploring how to manipulate the browser history in ...

React-scripts testing now displays error messages without a traceback

After recreating the browser version of the TacticToy game using React, I encountered an issue while writing unit tests. The problem is that there is no complete traceback provided for a custom exception, with only the test function being highlighted: htt ...