tween.js
Javascript tweening engine
I want to rewrite code below without the use of a tween.js
svg animation ／ current code (used the tween.js)
var path1 = document.getElementById('path1');
var path2 = document.getElementById('path2');
var pathLength = path2.getTotalLength();
var tween = new TWEEN.Tween({ offset: 1 }).to({ offset: pathLength }, 1000 )
.onUpdate(function(){
path1.setAttribute('startOffset', this.offset);
}).repeat(5)
.start();
animate = function(){
requestAnimationFrame(animate);
TWEEN.update();
}
animate();
Source: (StackOverflow)
I have an Tween animation that works fine without any mouse events. Right now I'm having a trouble when I want to add an mouseover event. I want to have an continuous animation on an mouseover event and to stop(complete) an animation on an mouseout event.
In mine animation the sprites move into four different shapes and I want the animation to stop(complete) on the mouseout events after the sprites have moved to their next position. You can see the animation on fiddle. When you put your cursor on the yellow cube you can see that the animation stops after the sprites have moved to their next position. This is what I want to fix. I can't make the animation continuous on an mouseover event.
What I haven't tryed yet is to make a chain from four different Tween animations. That would probably be ok for me, but I would prefer to have sprites move from their past positions like they do it on fiddle already. I think making four different Tween animations is more complex then it is now. Can anyone please help me out?
Here is the code from fiddle:
var camera, scene, renderer,controls;
var particlesTotal = 512,
positions = [],
objects = [],
current = 0;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 100000 );
camera.position.set( 600, 400, 8000 );
camera.lookAt( new THREE.Vector3() );
scene = new THREE.Scene();
var material=new THREE.SpriteMaterial({
//map:THREE.ImageUtils.loadTexture('http://threejs.org/examples/textures/sprite.png'),
color:0xffffff
});
for ( var i = 0; i < particlesTotal; i ++ ) {
var object = new THREE.Sprite(material);
object.scale.x = 100;
object.scale.y = 100;
object.position.x = Math.random() * 4000 - 2000,
object.position.y = Math.random() * 4000 - 2000,
object.position.z = Math.random() * 4000 - 2000
scene.add( object );
objects.push( object );
}
transition();
var geometry = new THREE.BoxGeometry( 600, 600, 600 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
cube.position.set( 100, 1000, 3000 );
var domEvents = new THREEx.DomEvents(camera, scene.domElement);
domEvents.addEventListener(cube, 'mouseover', function(event){
var offset = current * particlesTotal * 3;
var duration = 2000;
for ( var i = 0, j = offset; i < particlesTotal; i ++, j += 3 ) {
var object = objects[ i ];
new TWEEN.Tween( object.position )
.to( {
x: positions[ j ],
y: positions[ j + 1 ],
z: positions[ j + 2 ]
}, Math.random() * duration + duration )
.easing( TWEEN.Easing.Exponential.InOut )
.start();
}
new TWEEN.Tween( this )
.to( {}, duration * 3 )
.onComplete( transition )
.start();
current = ( current + 1 ) % 4;
}, false);
// var domEvents = new THREEx.DomEvents(camera, scene.domElement);
//domEvents.addEventListener(cube, 'mouseout', function(event){
// }, false);
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.rotateSpeed = 0.5;
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function transition() {
// Plane
var amountX = 16;
var amountZ = 32;
var separation = 150;
var offsetX = ( ( amountX - 1 ) * separation ) / 2;
var offsetZ = ( ( amountZ - 1 ) * separation ) / 2;
for ( var i = 0; i < particlesTotal; i ++ ) {
var x = ( i % amountX ) * separation;
var z = Math.floor( i / amountX ) * separation;
var y = ( Math.sin( x * 0.5 ) + Math.sin( z * 0.5 ) ) * 200;
positions.push( x - offsetX, y, z - offsetZ );
}
// Cube
var amount = 8;
var separation = 150;
var offset = ( ( amount - 1 ) * separation ) / 2;
for ( var i = 0; i < particlesTotal; i ++ ) {
var x = ( i % amount ) * separation;
var y = Math.floor( ( i / amount ) % amount ) * separation;
var z = Math.floor( i / ( amount * amount ) ) * separation;
positions.push( x - offset, y - offset, z - offset );
}
// Random
for ( var i = 0; i < particlesTotal; i ++ ) {
positions.push(
Math.random() * 4000 - 2000,
Math.random() * 4000 - 2000,
Math.random() * 4000 - 2000
);
}
// Sphere
var radius = 750;
for ( var i = 0; i < particlesTotal; i ++ ) {
var phi = Math.acos( -1 + ( 2 * i ) / particlesTotal );
var theta = Math.sqrt( particlesTotal * Math.PI ) * phi;
positions.push(
radius * Math.cos( theta ) * Math.sin( phi ),
radius * Math.sin( theta ) * Math.sin( phi ),
radius * Math.cos( phi )
);
}
}
function animate() {
requestAnimationFrame( animate );
TWEEN.update();
controls.update();
renderer.render( scene, camera );
renderer.autoClear = false;
}
Source: (StackOverflow)
I got a question regarding the use of tween.js with three.js
I've been trying to get a color tween to work that triggers on a mousedown.
However it's not triggering the tween, and not giving any errors.
I'm at a loss :(
for (var i = 0; i < scene.children.length; i++) {
if (scene.children[i].position.z <= maxPositionZ && scene.children[i].position.z >= minPositionZ) {
if (scene.children[i].position.y <= maxPositionY && scene.children[i].position.y >= minPositionY) {
if (scene.children[i].position.x <= maxPositionX && scene.children[i].position.x >= minPositionX) {
timer = timer + tweenSpeed
doTimeout(i,timer);
}
}
}
}
function doTimeout(i,timer){
var fadeouttimer = 1000 + timer
setTimeout(function() {
var tween = new TWEEN.Tween(scene.children[i].children[0].material.color).to({r: 1, g: 0, b: 0 }, 200).start()
}, timer);
}
Source: (StackOverflow)
Hello I created a CSS3DRendered and a helix of images. I also use orbitControls.js.
This is the piece of code that creates the helix
var vector = new THREE.Vector3();
for ( var i = 0, l = objects.length; i < l; i ++ ) {
var phi = i * 0.175 + Math.PI;
var object = new THREE.Object3D();
object.position.x = 2500 * Math.sin( phi );
object.position.y = - ( i * 12 ) + 450;
object.position.z = 2500 * Math.cos( phi );
vector.x = object.position.x * 2;
vector.y = object.position.y;
vector.z = object.position.z * 2;
object.lookAt( vector );
targets.helix.push( object );
}
I've added an eventListener on each object and when I click an image from the helix, I'd like the helix or the camera to rotate on the y axis and stop when the image / object clicked is at the center of the screen.I'm not so good with maths and I have tried various way to accomplish this with no luck so far.
Any guidance or tips will be greatly appreciated.
Source: (StackOverflow)
I've started using Three.js just yeasterday and I have bumped into problem with tweening. I figured out how to hack example with draggable cube to control rotation with keyboard arrows. Works just fine. But problem is alpha. I tried to hack it with custom function with lot of this:
if(someBoolean == 1){object.material.opacity -= someFloat;}
and it works, but once I try doing this:
case KEYUP:
new TWEEN.Tween(cubeOpacity).to(0).start();
console.log("tweening opacity to 0");
nope, not gonna happen. Console says nothing is wrong, but tweening goes on forever, it stays at value 1. And have no idea why. And writing some function for chaning opacity of every single element seems to be against DRY philosophy, so... meh.
Here is entire code:
<script src="js/three.min.js"></script>
<script src="js/tween.min.js"></script>
<script src="js/keys.js"></script>
<script>
var container, stats;
var camera, scene, renderer;
var cube;
var centerX = window.innerWidth / 2;
var centerY = window.innerHeight / 2;
init();
animate();
function init(){
container = document.createElement( 'div');
document.body.appendChild(container);
var info = document.createElement ('div');
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTLM = 'Drag to spin';
container.appendChild(info);
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.y = 150;
camera.position.z = 500;
scene = new THREE.Scene();
// Cube
var geometry = new THREE.CubeGeometry( 200, 200, 200, 10, 10, 10);
for (var i = 0; i < geometry.faces.length; i+= 3 ) {
var hex = Math.random() * 0xffffff;
geometry.faces[i].color.setHex(hex);
geometry.faces[i+1].color.setHex(hex+100);
}
var material = new THREE.MeshBasicMaterial( {vertexColors: THREE.FaceColors, overdraw: 0.5, transparent: true, opacity: 1.0 } );
cube = new THREE.Mesh(geometry, material);
cube.position.y = 150;
scene.add(cube);
// Plane
var geometry = new THREE.PlaneGeometry( 200, 200, 10, 10 );
geometry.applyMatrix( new THREE.Matrix4().makeRotationX(- Math.PI / 2));
var materialBottom = new THREE.MeshBasicMaterial( { color: 0xe0e0e0, overdraw: 0.5 } );
plane = new THREE.Mesh(geometry, materialBottom);
scene.add(plane);
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
document.addEventListener('keydown', onKeyPressed, false);
}
function onWindowResize(){
centerX = window.innerWidth / 2;
centerY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
TWEEN.update();
if (TWEEN.update()) {
console.log(TWEEN.update());
console.log(cube.material.opacity);
}
renderer.render( scene, camera );
}
function onKeyPressed (event) {
var key = event.keyCode;
if (!TWEEN.update()) {
switch( key )
{
case KEYLEFT:
new TWEEN.Tween(cube.rotation).to( {
x: 0,
y: cube.rotation.y + 90 * (Math.PI/180),
z: 0 }, 750 )
.easing( TWEEN.Easing.Quadratic.InOut).start();
new TWEEN.Tween(plane.rotation).to( {
x: 0,
y: plane.rotation.y + 90 * (Math.PI/180),
z: 0 }, 1000 )
.easing( TWEEN.Easing.Quadratic.InOut).start();
console.log("tweenLeft");
break;
case KEYRIGHT:
new TWEEN.Tween(cube.rotation).to( {
x: 0,
y: cube.rotation.y -90 * (Math.PI/180),
z: 0 }, 750 )
.easing( TWEEN.Easing.Quadratic.InOut).start();
new TWEEN.Tween(plane.rotation).to( {
x: 0,
y: plane.rotation.y -90 * (Math.PI/180),
z: 0 }, 1000 )
.easing( TWEEN.Easing.Quadratic.InOut).start();
console.log("tweenRight");
break;
case KEYUP:
new TWEEN.Tween(cube.material.opacity).to(0).start();
console.log("tweenAlpha");
break;
}
}
}
</script>
So, does anybody knows where the problem is? Thanks in advance!
Source: (StackOverflow)
How can I tween the innerRadius attribute of THREE.RingGeometry() in three.js using tween.js. I don't want to scale the ring, I want to update geometry.
Source: (StackOverflow)
I'm attempting to tween the camera.lookAt in Three.js using Tween.js with little success.
This works
selectedHotspot = object;
var tween = new TWEEN.Tween(camera.lookAt( object.position),600).start();
But rotates the camera directly to the object.position.
How do I get a nice smooth rotation?
This is the render function
function update() {
lat = Math.max(-85, Math.min(85, lat));
phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(lon);
target.x = 512 * Math.sin(phi) * Math.cos(theta);
target.y = 512 * Math.cos(phi);
target.z = 512 * Math.sin(phi) * Math.sin(theta);
if(!selectedHotspot)
camera.lookAt(target);
renderer.render(scene, camera);
}
UPDATE
OK I can't actually tween the camera on anything. I think there must be something else wrong. Should there be something else in the render function?
Source: (StackOverflow)
I want to tween camera position while rotation.
Here is my function:
function moveAndLookAt(camera, dstpos, dstlookat, options) {
options || (options = {duration: 300});
var origpos = new THREE.Vector3().copy(camera.position); // original position
var origrot = new THREE.Euler().copy(camera.rotation); // original rotation
camera.position.set(dstpos.x, dstpos.y, dstpos.z);
camera.lookAt(dstlookat);
var dstrot = new THREE.Euler().copy(camera.rotation)
// reset original position and rotation
camera.position.set(origpos.x, origpos.y, origpos.z);
camera.rotation.set(origrot.x, origrot.y, origrot.z);
//
// Tweening
//
// position
new TWEEN.Tween(camera.position).to({
x: dstpos.x,
y: dstpos.y,
z: dstpos.z
}, options.duration).start();;
// rotation (using slerp)
(function () {
var qa = camera.quaternion; // src quaternion
var qb = new THREE.Quaternion().setFromEuler(dstrot); // dst quaternion
var qm = new THREE.Quaternion();
var o = {t: 0};
new TWEEN.Tween(o).to({t: 1}, options.duration).onUpdate(function () {
THREE.Quaternion.slerp(qa, qb, qm, o.t);
camera.quaternion.set(qm.x, qm.y, qm.z, qm.w);
}).start();
}).call(this);
}
It works great: http://codepen.io/abernier/pen/zxzObm
The only problem is the tween for rotation does NOT seem to be linear... causing decay with position's tween (which is linear).
How can I turn slerp into a linear tween ?
Thank you
Source: (StackOverflow)
I do a growth animation of a fixed number of items, and after growth, i moved it to left.
Make growth by apply matrix
var trans_vector = new THREE.Matrix4().makeTranslation(0, height / 2, 0);
var graphics = new Graphics();
var rectangle = graphics.box(width, height, material);
rectangle.geometry.applyMatrix(trans_vector);
When a new item is added, i remove one from the container that will be added to scene
var children = this.container.children;
if (this.current_number === this.max_number) {
this.container.remove(children[0]);
this.current_number = this.max_number - 1;
}
object.position.copy(this.position); // this is a fixed position
this.container.add(object);
this.current_number++;
I write a function to translate to left, using tweenjs (sole)
animateTranslation : function(object, padding, duration) {
var new_x = object.position.x - padding; // Move to left
console.log(new_x); // Duplicated item here :(
new TWEEN.Tween(object.position).to({
x : new_x
}, duration).start();
},
And I remove all the "previous" items, using for loop
for (var i = 0; i < this.current_number-1; i++) {
this.animateTranslation(this.container.children[i],
this.padding,
this.duration/4)
}
The above code run correctly if we open and keep this current tab.
The problem is when we move to another tab, do something and then move back, some objects have the same position, that cause the translation to the same position. It looks weird.
It appears on both Chrome, Firefox and IE11.
I dont know why, please point me out what happened.
Source: (StackOverflow)
I am looping through an array of CSS3DObjects in THREE.JS and want to remove them from the DOM in the context of Tween.js onComplete(). But how do I refer to the dom instance so each Tween instance can tell the dom element to remove itself?
for ( var i = 0; i < _tier1Objects.length; i ++ ) {
new TWEEN.Tween( _tier1Objects[i].position )
.to( {z: -50}, 1000 )
.easing( TWEEN.Easing.Quadratic.Out)
.onComplete( function() {
scene.remove( [CSS3DObject instance] ); // REMOVE THE THREE JS OBJ INSTANCE
$([dom element]).remove(); // REMOVE THE HTML DOM ELEMENT VIA JQUERY
})
.start();
}
Perhaps there's a best practice I'm not aware of here. Please advise.
Source: (StackOverflow)
I'm confused.
I've made a group of 10 sprites and added them to a THREE.Object3D() called fireworkGroup. I have another Object3D called explode. The tween loops through the sprites changing them from their initial position to explode.position.
for ( var i = 0; i < fireworkGroup.children.length; i ++ )
{
explode.position.x =(Math.random() - 0.5)*4;
explode.position.y =4;
explode.position.z =2;
var tweenLaunch = new TWEEN.Tween(fireworkGroup.children[i].position).to(explode.position, 4000).easing( TWEEN.Easing.Quartic.In);
tweenLaunch.start();
}
The tween is moving all the sprites from their start position to the same end position. So I thought this might be because "tweenLaunch" is being overwritten with a different explode.position each time as the tween is rendered so I'm only seeing the last one created in the loop. When I refresh the page they do all move to a different position, consistent with the Math.random().
But then why do all the sprites move to the explode.position? If "tweenLaunch" is being overwritten then why is it not moving only the last sprite?
Is it possible to have a loop with a tween in it that also changes?
Many Thanks.
Source: (StackOverflow)
I want to animate multiple screen objects with tween.js.
The objects are organized in an array and I want to pass each individual element to the tween function which looks roughly as follows: http://jsfiddle.net/8L9Dz/
var target1 = document.getElementById( 'target1' );
var target2 = document.getElementById( 'target2' );
targets.push(target1);
targets.push(target2);
for(var i = 0; i < 2;i++ ){
var tween = new TWEEN.Tween( targets[i].dataset ) // i'th element
.to( { rotation: 360, y: 300 }, 750 )
.easing( TWEEN.Easing.Cubic.InOut )
.onUpdate( function() {
updateBox( targets[i], this );
})
.start();
}
When I run the code locally firefox tells me that "box is undefined" - this corresponds to the 1st line in updateBox(...)
I guess this is somehow related to the closure of the function, but I'm no expert in JavaScript - does anyone know?
Source: (StackOverflow)
I am new to Three.js and Tween.js.
And I want to create an animation which an object could "grow": like an animation of 3D ball grows into a tube (or the 3D ball been dragged into the tube).
Can this been created by THREE.ExtrudeGeometry and Tween.js? If yes,
can I have some detail explanation or simple steps for this?
I'll be really appreciate for any better ideas. :)
Thank you very much.
Brs,
Bryan
Source: (StackOverflow)
I am trying to rotate a 2 face plane named slice_one 160 deg in smooth way.
I have tried this
new TWEEN.Tween(slice_one.rotation).to({ y: slice_one.rotation.y + Math.PI / 2 }, 1000).easing(TWEEN.Easing.Quadratic.EaseOut).start();
and the tween.update(); in animation function;
This method returns an error of three.min.js >> l is not a function <<
Is there another way to rotate in a smooth way the plane like THREE.Quaternion.setEuler ?
Here is my entire code
<html>
<head>
<title>My first Three.js app</title>
<style>
body {
background-color: #fff;
margin: 0px;
overflow: hidden;
}
container {
background-color: #ffffff;
}
</style>
</head>
<body>
<img id="pic" />
<canvas id="Canvas" style="display:none"></canvas>
<button id="Folding"></button>
<div id="container"></div>
<script src="three.min.js"></script>
<script src="Tween.js"></script>
<script src="tween.min.js"></script>
<script src="OrbitControls.js"></script>
<script src="stats.min.js"></script>
<script>
var front = new Image();
front.src = '1.jpg';
var back = new Image();
back.src = '1.jpg';
var canvas = document.getElementById('Canvas');
var context = canvas.getContext('2d');
//Slice one front face
function convert_f1() {
canvas.width = front.width / 2;
canvas.height = front.height;
var sourceX = 0;
var sourceY = 0;
var sourceWidth = front.width / 2;
var sourceHeight = front.height
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = 0;
var destY = 0;
context.drawImage(front, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
dataURL = canvas.toDataURL();
console.log(dataURL);
return dataURL;
}
//Slice one back face
function convert_b1() {
canvas.width = back.width / 2;
canvas.height = back.height;
var sourceX = back.width / 2;
var sourceY = 0;
var sourceWidth = back.width / 2;
var sourceHeight = back.height
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = 0;
var destY = 0;
context.drawImage(back, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
dataURL = canvas.toDataURL();
console.log(dataURL);
return dataURL;
}
//Slice two front face
function convert_f2() {
canvas.width = front.width / 2;
canvas.height = front.height;
var sourceX = front.width / 2;
var sourceY = 0;
var sourceWidth = front.width / 2;
var sourceHeight = front.height
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = 0;
var destY = 0;
context.drawImage(front, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
dataURL = canvas.toDataURL();
console.log(dataURL);
return dataURL;
}
//Slice two back face
function convert_b2() {
canvas.width = back.width / 2;
canvas.height = back.height;
var sourceX = 0;
var sourceY = 0;
var sourceWidth = back.width / 2;
var sourceHeight = back.height
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = 0;
var destY = 0;
context.drawImage(back, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
dataURL = canvas.toDataURL();
console.log(dataURL);
return dataURL;
}
window.onload = function () {
f1 = convert_f1();
b1 = convert_b1();
f2 = convert_f2();
b2 = convert_b2();
//document.getElementById("container").style.backgroundImage = "url('" + f1 + "')";
var frontWidth = front.width/2;
var frontHeight = front.height;
var backWidth = back.width/2;
var backHeight = back.height;
var renderer, scene, camera, slice_one;
var container, stats;
init();
animate();
function init() {
container = document.getElementById('container');
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xffffff);
renderer.setSize(window.innerWidth/2, window.innerHeight/2);
container.appendChild(renderer.domElement);
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = frontHeight*2;
controls = new THREE.OrbitControls(camera, container);
camera.lookAt(scene.position);
// geometry
var geometry1 = new THREE.PlaneGeometry(frontWidth, frontHeight, 1, 1);
var geometry2 = new THREE.PlaneGeometry(backWidth, backHeight, 1, 1);
geometry2.applyMatrix(new THREE.Matrix4().makeRotationY(Math.PI));
var geometry3 = new THREE.PlaneGeometry(frontWidth , frontHeight , 1, 1);
var geometry4 = new THREE.PlaneGeometry(backWidth , backHeight , 1, 1);
geometry4.applyMatrix(new THREE.Matrix4().makeRotationY(Math.PI));
// textures slice_one
var texture_f1 = new THREE.ImageUtils.loadTexture(f1);
var texture_b1 = new THREE.ImageUtils.loadTexture(b1);
// textures slice_Two
var texture_f2 = new THREE.ImageUtils.loadTexture(f2);
var texture_b2 = new THREE.ImageUtils.loadTexture(b2);
// material slice_one
var material_f1 = new THREE.MeshBasicMaterial({ map: texture_f1, color: 0xffffff, transparent: true });
var material_b1 = new THREE.MeshBasicMaterial({ map: texture_b1, color: 0xffffff, transparent: true });
// material slice_two
var material_f2 = new THREE.MeshBasicMaterial({ map: texture_f2, color: 0xffffff, transparent: true });
var material_b2 = new THREE.MeshBasicMaterial({ map: texture_b2, color: 0xffffff, transparent: true });
// slice_one
slice_one = new THREE.Object3D();
scene.add(slice_one);
// positiion slice_one
geometry1.applyMatrix(new THREE.Matrix4().makeTranslation(-frontWidth / 2, 0, 0));
geometry2.applyMatrix(new THREE.Matrix4().makeTranslation(-frontWidth / 2, 0, 0));
// mesh slice_one
var mesh1 = new THREE.Mesh(geometry1, material_f1);
slice_one.add(mesh1);
var mesh2 = new THREE.Mesh(geometry2, material_b1);
slice_one.add(mesh2);
// slice_two
slice_two = new THREE.Object3D();
scene.add(slice_two);
// position slice_two
slice_two.position.x = frontWidth/2;
slice_two.position.y = 0;
slice_two.position.z = 0;
// mesh slice_one
var mesh3 = new THREE.Mesh(geometry3, material_f2);
slice_two.add(mesh3);
var mesh4 = new THREE.Mesh(geometry4, material_b2);
slice_two.add(mesh4);
//var grad = Math.PI / 2;
//tween = new TWEEN.Tween(slice_one.rotation).to({ y: grad }, 1000);
//tween.easing(TWEEN.Easing.Quadratic.InOut);
//tween.onComplete();
//tween.start();+
//function onDocumentMouseDown(event) {
// event.preventDefault();
// new TWEEN.Tween(slice_one.rotation).to({ y: slice_one.rotation.y + Math.PI / 2 }, 1000).easing(TWEEN.Easing.Quadratic.EaseOut).start();
// //new TWEEN.Tween(plane.rotation).to({ z: plane.rotation.z + rad90 }, 1000).easing(TWEEN.Easing.Quadratic.EaseOut).start();
// console.log("click");
//}
//document.addEventListener('mousedown', onDocumentMouseDown, false);
//new TWEEN.Tween(slice_one.rotation).to({ y: Math.PI / 2 }, 1000).easing(TWEEN.Easing.Quadratic.EaseOut).start();
}
function animate() {
requestAnimationFrame(animate);
slice_one.rotation.y += Math.PI / 60;
//TWEEN.update();
stats.update();
renderer.render(scene, camera);
}
}
</script>
</body>
</html>
Source: (StackOverflow)