Tips for effectively utilizing Timelinemax and Tween for object animation

Question

Tips for effectively utilizing Timelinemax and Tween for object animation

Hello Amazing Stackoverflow community,

I've been attempting to move my object in three.js to a specific point. I believe I need to utilize Tween.js for this task. However, in the tutorial I followed, they imported Tween Js but used 'timelinemax' which confused me a bit.

Below is my code snippet:


var scene = new THREE.Scene();

scene.background = new THREE.Color(0xf0f0f0);
var camera = new THREE.PerspectiveCamera(100, window.innerWidth/window.innerHeight, 0.1, 3000);
camera.position.x = 40;
camera.position.y = 20;
camera.position.z = 1500;

var renderer = new THREE.WebGLRenderer();
var render = function() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var coord = [{"x":300,"y":10,"z":10},{"x":20,"y":30,"z":30},{"x":30,"y":0,"z":50},
            {"x":40,"y":20,"z":70},{"x":50,"y":100,"z":90},
            {"x":60,"y":30,"z":110},{"x":70,"y":150,"z":90}];

var sphr;
var geom;
var sphrinfo = [];

function drawsphere() {
    for (let i=0; i<coord.length; i++) {
        var mat = new THREE.MeshPhongMaterial({flatShading: true});
        geom = new THREE.SphereGeometry(60, 50, 50);
        sphr = new THREE.Mesh(geom, mat);

        sphr.position.set(coord[i].x, coord[i].y, coord[i].z)
        sphrinfo.push(sphr)

        sphr.tl = new TimelineMax()
        sphr.tl.to(sphr.position.set, .5, {x:100, y:204, z:300})

        scene.add(sphr);
        render();
    }
}

drawsphere();

function movesphere() {
    for (let i=0; i<coord.length; i++) {
        sphrinfo[i].z = 10;
    }
}

function animate() {
    
}

var light = new THREE.AmbientLight(0x404040);
scene.add(light);

var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
scene.add(directionalLight);

I included TimelineMax to animate the spheres, but unfortunately, they do not move at all. Can someone assist me in resolving this issue?

My ultimate goal is to generate multiple spheres with specific x, y, z values and then have them drop to the plane where the z coordinate is zero, animating the process.

Thank you in advance.

javascript three.js tween gsap

Answer 1

Answer №1

Adolescents focus on properties, however, you are attempting to tween sphr.position.set which is a function.
You should simply tween the x, y and z values on sphr.position.

Displayed below is a demonstration, refer to the animateBox function.

var camera, scene, renderer, mesh, material;
init();
renderloop();
// Initiate animation of the box.
animateBox();

function init() {
    // Renderer.
    renderer = new THREE.WebGLRenderer();
    //renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    // Add renderer to page
    document.body.appendChild(renderer.domElement);

    // Create camera.
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 800;

    // Create scene.
    scene = new THREE.Scene();

    // Create material
    material = new THREE.MeshPhongMaterial();

    // Create cube and add to scene.
    var geometry = new THREE.BoxGeometry(200, 200, 200);
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // Create ambient light and add to scene.
    var light = new THREE.AmbientLight(0x404040); // soft white light
    scene.add(light);

    // Create directional light and add to scene.
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    // Add listener for window resize.
    window.addEventListener('resize', onWindowResize, false);

}

function renderloop() {
    requestAnimationFrame(renderloop);
    renderer.render(scene, camera);
}

function animateBox() {
  
  // only incorporate tweens.
  //gsap.to(mesh.position, {x: Math.floor((Math.random() * 600) - 300), duration: 5, ease: "elastic"});
  //gsap.to(mesh.position, {y: Math.floor((Math.random() * 600) - 300), duration: 5, ease: "elastic"});
  //gsap.to(mesh.position, {z: Math.floor((Math.random() * 600) - 300), duration: 5, ease: "elastic"});
  
  // utilize a timeline (and call this function again upon completion).
  // This makes use of GSAP V3
  var timeline = gsap.timeline({onComplete: animateBox});

  // animate mesh.position.x,
  // a random number between -300 and 300,
  // for 2 seconds.
  timeline.to(
    mesh.position,
    {x: Math.floor((Math.random() * 600) - 300), duration: 2, ease: "elastic"},
    0
  );
  
  // animate mesh.position.y
  timeline.to(
    mesh.position,
    {y: Math.floor((Math.random() * 600) - 300), duration: 2, ease: "elastic"},
    0
  );

  // animate mesh.position.z
  timeline.to(
    mesh.position,
    {z: Math.floor((Math.random() * 600) - 300), duration: 2, ease: "elastic"},
    0
  );
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

body {
    padding: 0;
    margin: 0;
}
canvas {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.5/gsap.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

Answer 2

Adolescents focus on properties, however, you are attempting to tween sphr.position.set which is a function.
You should simply tween the x, y and z values on sphr.position.

Displayed below is a demonstration, refer to the animateBox function.

var camera, scene, renderer, mesh, material;
init();
renderloop();
// Initiate animation of the box.
animateBox();

function init() {
    // Renderer.
    renderer = new THREE.WebGLRenderer();
    //renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    // Add renderer to page
    document.body.appendChild(renderer.domElement);

    // Create camera.
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 800;

    // Create scene.
    scene = new THREE.Scene();

    // Create material
    material = new THREE.MeshPhongMaterial();

    // Create cube and add to scene.
    var geometry = new THREE.BoxGeometry(200, 200, 200);
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // Create ambient light and add to scene.
    var light = new THREE.AmbientLight(0x404040); // soft white light
    scene.add(light);

    // Create directional light and add to scene.
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    // Add listener for window resize.
    window.addEventListener('resize', onWindowResize, false);

}

function renderloop() {
    requestAnimationFrame(renderloop);
    renderer.render(scene, camera);
}

function animateBox() {
  
  // only incorporate tweens.
  //gsap.to(mesh.position, {x: Math.floor((Math.random() * 600) - 300), duration: 5, ease: "elastic"});
  //gsap.to(mesh.position, {y: Math.floor((Math.random() * 600) - 300), duration: 5, ease: "elastic"});
  //gsap.to(mesh.position, {z: Math.floor((Math.random() * 600) - 300), duration: 5, ease: "elastic"});
  
  // utilize a timeline (and call this function again upon completion).
  // This makes use of GSAP V3
  var timeline = gsap.timeline({onComplete: animateBox});

  // animate mesh.position.x,
  // a random number between -300 and 300,
  // for 2 seconds.
  timeline.to(
    mesh.position,
    {x: Math.floor((Math.random() * 600) - 300), duration: 2, ease: "elastic"},
    0
  );
  
  // animate mesh.position.y
  timeline.to(
    mesh.position,
    {y: Math.floor((Math.random() * 600) - 300), duration: 2, ease: "elastic"},
    0
  );

  // animate mesh.position.z
  timeline.to(
    mesh.position,
    {z: Math.floor((Math.random() * 600) - 300), duration: 2, ease: "elastic"},
    0
  );
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

body {
    padding: 0;
    margin: 0;
}
canvas {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.5/gsap.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

Tips for effectively utilizing Timelinemax and Tween for object animation

Answer №1

Similar questions

Getting a value from a Child component to a Parent component in Nuxt.js - a step-by-step guide

Different choices for data attributes in React

Enhancing the default functionality of React.FC within Next.js

I seem to be facing some difficulty in dynamically calling my buttons in AngularJS

Conditionally enable or disable button by comparing textbox values within a gridview using C# programming

When a single object is entered, JSON returns 'undefined', however, it works successfully when using the .map() function

Navigating to a different intent within the DialogFlow Messenger fulfillment can be done by utilizing the 'agent.setFollowupEvent(targetIntentEventName)' method

Assigning values to props in a Vue component

Discover a way to retrieve the index of elements in Vue JS that are not within a v-for loop

The problem with document.cookie: Functions properly on localhost but displays as empty when hosted on the web

Employing the CSS not selector within JavaScript

What is the best way to auto-fill input fields with data from a Json file

Is there a way to incorporate a Laravel foreach loop within a JavaScript file?

When multiple pages are open and one page remains idle, the user session will time out due to the timer implemented in JS/JQuery

Is your form complete?

Implementing non-blocking asynchronous object return in a node.js function

Ways to assess the efficiency of the client browser using JavaScript

Issue with MUI DataGridPro failing to sort the email field

Customize Bottom Navigation Bar in React Navigation based on User Roles

What is the best approach for creating a dynamic table in this situation?