This portfolio website with Vite.js. Developed with Vanilla JS and Three.js.
And the special in this case is an animated 3d scrolling animation.
It is a simple application that explore many computer graphics concepts.
Run npm i and than npm run dev for s dev server. Navigate to http://localhost:300. The app will automatically reload if you change any of the source files
Some of the most visually impressive websites use scroll animations with Three.js. The following snippet is configures a Three.js scene to animate when the user moves the scrollbar.
Setup a basic fullscreen using the example from the official docs:
impot * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );Make the canvas stay fixed to screen as an animated background.
canvas {
position: fixed;
top: 0;
left: 0;
}Overlay the main content with abosolute positioning. It is given an artifically large height value to make it scroll without content.
main {
width: 100vw;
height: 500vh;
z-index: 99;
position: absolute;
}<body>
<main></main>
</body>Finally, add a cube to the scene and animate it. Listen to the onscroll on the body to trigger a change or calculate the next animation position.
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function animate() {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
cube.rotation.z += 0.01;
renderer.render( scene, camera );
}
document.body.onscroll = () => {
animate()
console.log(document.body.offsetTop)
}Send me an email: [email protected]