does anyone know how I could use tween.js library to smoothly scale objects in three.js? Like for instance if I had a 3d cube how could I make it shrink and then have it return back to its normal size all with one smooth animation. I would appreciate any help or examples you could provide. Thanks
Add a comment
|
2 Answers
And something more funny:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(1, 5, 3);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
var box = new THREE.Mesh(new THREE.BoxBufferGeometry(2, 2, 2), new THREE.MeshBasicMaterial({
wireframe: true
}));
scene.add(box);
box.userData.isTweening = false;
btn.addEventListener("click", event => {
if (box.userData.isTweening) return;
var tweenInflate = new TWEEN.Tween(box.scale).to({
x: 2,
y: 2,
z: 2
}, 1500).easing(TWEEN.Easing.Elastic.Out).onStart(() => {
box.userData.isTweening = true;
});
var tweenDeflate = new TWEEN.Tween(box.scale).to({
x: 1,
y: 1,
z: 1
}, 1000).onComplete(() => {
box.userData.isTweening = false;
});
tweenInflate.chain(tweenDeflate);
tweenInflate.start();
}, false);
renderer.setAnimationLoop(() => {
TWEEN.update();
renderer.render(scene, camera);
});body {
overflow: hidden;
margin: 0;
}
button {
position: absolute;
margin: 5px;
}<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.7.0/Tween.js"></script>
<button id="btn">tweenme</button>
Comments
Use the following basic example as a code template.
var camera, scene, renderer;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
scene = new THREE.Scene();
var geometry = new THREE.PlaneGeometry( 0.2, 0.2 );
var material = new THREE.MeshBasicMaterial();
var 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 );
var targetPosition = new THREE.Vector3( 0, 0, 0 );
// create animation
new TWEEN.Tween( mesh.scale )
.to( targetPosition )
.repeat( Infinity )
.yoyo( true )
.easing( TWEEN.Easing.Cubic.InOut )
.start();
}
function animate() {
requestAnimationFrame( animate );
TWEEN.update();
renderer.render( scene, camera );
}body {
margin: 0;
}
canvas {
display: block;
}<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tweenjs/[email protected]/dist/tween.umd.js"></script>