JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.6.0/Tween.min.js"></script>
JavaScript
var camera, scene, renderer, geometry, material, mesh;
// http://stackoverflow.com/questions/43252767/three-js-and-tween-js-chained-animation-with-rotations-does-not-work
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(150, window.innerWidth / window.innerHeight, 1, 900);
camera.position.z = 500;
scene.add(camera);
geometry = new THREE.CubeGeometry(200, 200, 200);
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
testChained();
}
function testChained(){
var radians = 90 * THREE.Math.DEG2RAD;
var rotationMatrix_a = new THREE.Matrix4().makeRotationY(mesh.rotation.y);
var distance_a = new THREE.Vector3(0.0, 0.0, 50.0);
distance_a.applyMatrix4(rotationMatrix_a);
// values enclosed by "" make the operation relative to the current position/rotation. See https://github.com/tweenjs/tween.js/blob/master/docs/user_guide.md#relative-values
var target_a = {
x: String(distance_a.x),
y: String(distance_a.y),
z: String(distance_a.z)
}
var a = new TWEEN.Tween(mesh.position).to(target_a, 500).onComplete(function(){
console.log("animation a");
console.log(mesh.position);
console.log(mesh.rotation);
});
var radiansToString = String("+"+radians);
let target_b = {y:radiansToString};
var b = new TWEEN.Tween(mesh.rotation).to(target_b, 500).onComplete(function(){
console.log("animation b");
console.log(mesh.position);
console.log(mesh.rotation);
});;
var rotationMatrix_c = new THREE.Matrix4().makeRotationY(radians);
var distance_c =...