I am venturing into the world of Three.js and facing a challenge. In the center of my scene, I have a rotating icosahedron. When I click a button, it should start rotating faster and the camera should move closer to make it appear larger. However, I am struggling with applying an acceleration curve to this animation rather than a linear progression.
I have searched through numerous tutorials and examples, but I have not found a clear explanation of how to achieve a cubic-bezier effect.
I have also attempted to use GSAP for this purpose, but I have not seen any desired effects. If you are unable to assist me directly, perhaps you could recommend some articles or tutorials where I can learn about these types of transitions?
Below is the code I am currently working with:
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 5000 );
let renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener('resize',() => {
let width = window.innerWidth;
let height = window.innerHeight;
renderer.setSize( width, height );
camera.aspect = width / height;
camera.updateProjectionMatrix();
});
camera.position.z = 10;
var pointL1 = new THREE.PointLight( 0xffffff, 2, 30);
pointL1.position.x = -4;
pointL1.position.y = 7;
pointL1.position.z = 8;
scene.add( pointL1 );
var geometry1 = new THREE.IcosahedronGeometry(5, 1);
var material1 = new THREE.MeshBasicMaterial( { color: 0x222222, wireframe: true } );
var icosahedron = new THREE.Mesh( geometry1, material1 );
scene.add( icosahedron );
icosahedron.rotation.y -= 1;
let maxCameraDist = 10;
let minCameraDist = 8;
let cameraDist = 10;
let duringChange = false;
function render () {
if (duringChange == false) {
icosahedron.rotation.y += 0.001;
icosahedron.rotation.z += 0.001;
if (cameraDist < maxCameraDist) {
cameraDist += 0.05;
camera.position.z = cameraDist;
}
} else {
icosahedron.rotation.y += 0.003;
icosahedron.rotation.z += 0.003;
if (cameraDist > minCameraDist) {
cameraDist -= 0.05;
camera.position.z = cameraDist;
}
}
}
let loop = function() {
requestAnimationFrame(loop);
render();
renderer.render(scene, camera);
}
loop();
document.querySelector('button').addEventListener('click',() => {
if (duringChange == false) duringChange = true; else duringChange = false;
})button {
padding: 20px;
position: absolute;
z-index: 2;
}
canvas {
position: absolute;
z-index: 1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<body>
<button>Change it</button>
</body>`