three 0.161.0

Three.js is a superbly handy JavaScript 3D library. The project's mission is to provide an easy to use, lightweight, cross-browser, fitting for various purposes 3D library. It's predominantly built around a WebGL renderer, however, you can also find WebGPU (experimental), SVG, and CSS3D renderers as add-ons, thereby making it an extremely flexible tool for your 3D web needs.

To integrate the Three.js library into your project, import it and then create a scene, a camera, and a geometric object. After that, you can add the object to the scene, create a WebGL renderer for the scene and camera, and add this viewport to your document's body. Here is an exemplary usage:

import * as THREE from 'three';

const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
const material = new THREE.MeshNormalMaterial();

const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animation );
document.body.appendChild( renderer.domElement );

function animation( time ) {
	mesh.rotation.x = time / 2000;
	mesh.rotation.y = time / 1000;
	renderer.render( scene, camera );
}

This script will create and animate a cube in the viewport. You can further customize the scene, the object geometry, materials, and animations as per your project.

You can find the complete and detailed documentation for Three.js on the official website at https://threejs.org/docs/. It's an excellent resource for learning more about the various capabilities of this library and how to use them. It includes detailed setup instructions, explanations of the core components and systems, and an extensive list of examples and tutorials that can guide your learning process or inspire your next project.