Example 1: three js
import * as THREE from './js/three.module.js';
let camera, scene, renderer;
let geometry, material, mesh;
init();
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.BoxGeometry( 0.2, 0.2, 0.2 );
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
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 );
}
Example 2: what is three.js
Three.js is an opensourse cross-browser JavaScript library
application programming interface (API)
used to create and display animated 3D computer graphics in the browser
using WebGL.
*** available via NPM *** and Github
FEATURES
Effects: Anaglyph, cross-eyed, and parallax barrier.
Scenes: add and remove objects at run-time; fog
Cameras: perspective and orthographic;
controllers: trackball, FPS,
Animation: armatures, forward kinematics,
inverse kinematics, morph, and keyframe
Lights: ambient, direction, point, and spot lights; shadows: cast and receive
Materials: Lambert, Phong, smooth shading, textures, and more
Shaders: access to full OpenGL Shading Language (GLSL) capabilities:
lens flare, depth pass, and extensive post-processing library
Objects: meshes, particles, sprites, lines, ribbons, bones,
Geometry: plane, cube, sphere, torus, 3D text,
modifiers: lathe, extrude, and tube
Data loaders: binary, image, JSON, and scene
Utilities: full set of time and 3D math functions
frustum, matrix, quaternion, UVs, and more
Export and import: utilities to create Three.js-compatible JSON files
from : Blender, openCTM, FBX, Max, and OBJ
examples plus fonts, models, textures, sounds, other support files
Debugging: Stats.js, WebGL Inspector, Three.js Inspector
Virtual and Augmented Reality via WebXR