As someone who is just beginning to explore Three.JS and 3D web development, I am eager to recreate a specific action that I saw in this video: https://www.youtube.com/watch?v=HWSTxPc8npk&feature=youtu.be&t=7s. The concept involves a group of 3D planes where clicking on one causes the surrounding planes to react and create space around the selected plane.
Currently, my initial test involves 3 planes, and my goal is to achieve a smooth animation where, upon clicking the center plane, the other planes smoothly adjust to create the illusion of being pushed rather than simply appearing and disappearing instantly.
In the future, I aim to implement a separate button for each plane, allowing users to click on a plane to create padding around it while the remaining planes in the stack adjust accordingly.
While I have looked into tools like Tween.js and CSS3D, as a beginner, I feel a bit overwhelmed. Any tutorials or tips on how to achieve this effect would be greatly appreciated!
// The JavaScript code for our project will be written here.
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.PlaneGeometry( 3, 3, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var plane = new THREE.Mesh( geometry, material );
plane.rotation.y = -.7;
var material2 = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
var material3 = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var plane2 = new THREE.Mesh(geometry, material2 );
plane2.rotation.y = -.7;
plane2.position.x = 1;
var plane3 = new THREE.Mesh(geometry, material3);
plane3.rotation.y = -.7;
plane3.position.x = -1;
scene.add( plane, plane2, plane3 );
camera.position.z = 5;
function render() {
requestAnimationFrame( render );
// cube.rotation.x += 0.1;
// cube.rotation.y += 0.1;
renderer.render( scene, camera );
}
render();
function clickFirst() {
TWEEN.removeAll();
var tween = new TWEEN.Tween(plane3.position).to({x: -2}, 1000).start();
tween.easing(TWEEN.Easing.Elastic.InOut);
render();
}
</script>
<button onclick="clickFirst();" style="background-color: white; z-index: 9999;">Click me</button>