body {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
display: block;
}
let camera, scene, renderer;
let geometry, material, butterfly;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
scene = new THREE.Scene();
geometry = new THREE.PlaneGeometry( 0.2, 0.2, 0.2, 0.2 );
material = new THREE.MeshBasicMaterial( {color: 0xff00ff, side: THREE.DoubleSide} );
butterfly = new THREE.Mesh( geometry, material );
scene.add( butterfly );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
butterfly.rotation.x += 0.01;
butterfly.rotation.y += 0.01;
renderer.render( scene, camera );
}
In this example, we create a simple butterfly animation using Three.js library. Three.js is a popular 3D library that allows you to create and render 3D animations on the web.
To start, we create a basic HTML document and include the necessary Three.js library using a tag.
Next, we define our JavaScript code to create the 3D scene, camera, and renderer. We initialize the camera and position it in the z-axis. We then create a scene using THREE.Scene() and define a geometry and material for the butterfly model. We add the butterfly to the scene and create a WebGL renderer to display our animation.
In the animate() function, we use requestAnimationFrame to continuously call the function to update and render the butterfly animation. We rotate the butterfly on the x and y axes to create a subtle spinning animation effect.
Finally, we add the renderer.domElement to the HTML body to display the animated butterfly.
This simple example demonstrates how easy it is to create a basic 3D animation using Three.js. With some CSS styling and additional functionality, you can create more complex and visually stunning 3D animations on your web projects. So, if you are interested in creating 3D animations, be sure to check out Three.js and unleash your creativity!
Hallo