three js in javascript code example

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

Tags:

Html Example