Getting Started with Three.js
Creating HTML skeleton
<!DOCTYPE html>
<html lang=”en” >
<head>
<meta charset=”UTF-8">
<title>Three.js</title>
<link rel=”stylesheet” href=”./style.css”>
</head>
<body><script src=’https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js'></script>
<script src=”./script.js”></script></body>
</html>
Rendering and viewing a 3D object
I’ll first show you how this looks in code and then I’ll explain what’s happening:
var scene, camera, renderer, box, box2, box3;
var clock = new THREE.Clock();
var time = 0;
var delta = 0;init();
function init(){
scene = new THREE.Scene();
scene.background = new THREE.Color(0xaaaaaa);
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 3;
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const light = new THREE.DirectionalLight();
light.position.set(0,1,2);
scene.add(light);
const geometry = new THREE.BoxGeometry( 1, 1, 1);
const material = new THREE.MeshStandardMaterial({color: new THREE.Color(‘skyblue’)});
box = new THREE.Mesh(geometry, material);
scene.add(box);box2 = new THREE.Mesh(geometry, material);
box2.position.x = -1.5
scene.add(box2);box3 = new THREE.Mesh(geometry, material);
box3.position.x = 1.5
scene.add(box3);
window.addEventListener( ‘resize’, onResize, false);
update();
}function update(){
requestAnimationFrame( update );
renderer.render( scene, camera );
box.rotation.y += 0.01;
box2.rotation.x += 0.01;
//box3.rotation.z += 0.05;delta = clock.getDelta();
time += delta;
box3.rotation.x = time * 2;
box3.position.y = 0.5 + Math.abs(Math.sin(time * 3)) * 2;box3.rotation.x = time * 4;
box3.position.y -= 0.5 + Math.abs(Math.sin(time * 1)) * 1;// box3.position.z = Math.cos(time) * 4;
}
function onResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
Lets go through the code:
scene = new THREE.Scene();
scene.background = new THREE.Color(0xaaaaaa);
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 3;
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const light = new THREE.DirectionalLight();
light.position.set(0,1,2);
scene.add(light);
const geometry = new THREE.BoxGeometry( 1, 1, 1);
const material = new THREE.MeshStandardMaterial({color: new THREE.Color(‘skyblue’)});
box = new THREE.Mesh(geometry, material);
scene.add(box);At the top of the example, we create a scene, a camera, and a renderer. The scene object is a container that is used to store and keep track of all the objects we want to render and all the lights we want to use. Without a THREE.Scene object, Three.js isn’t able to render anything. We also create a camera object. The camera object defines what we’ll see when we render a scene. Next, we define renderer. The renderer object is responsible for calculating what the scene object will look like in the browser based on what the camera is looking at. We create a WebGLRenderer that uses your graphics card to render the scene in this example. After that we created mesh by combining geometry and material and we have added it to the screen.
function update(){
requestAnimationFrame( update );
renderer.render( scene, camera );
box.rotation.y += 0.01;
box2.rotation.x += 0.01;
//box3.rotation.z += 0.05;delta = clock.getDelta();
time += delta;
box3.rotation.x = time * 2;
box3.position.y = 0.5 + Math.abs(Math.sin(time * 3)) * 2;box3.rotation.x = time * 4;
box3.position.y -= 0.5 + Math.abs(Math.sin(time * 1)) * 1;// box3.position.z = Math.cos(time) * 4;
}
We have called update function which will do the transition like rotation, bouncing etc.. and at the end we have called resize function just in case If users are resizing browser, in that case everything should work as expected.
function onResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
For more details please have a look into below links
https://threejs.org/
https://threejs.org/editor/
