Scribd
Upload
15 views17 pages

ThreeJS (2 3) 1

This document provides an overview of creating a 3D scene using Three.js, detailing essential components such as the camera, lights, objects, and materials. It explains how to set up a scene with a WebGL renderer, add geometries like boxes and spheres, and control the camera using OrbitControls. Additionally, it covers animation techniques and the use of rendering methods in Three.js.

Uploaded by

nano.rajab17
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
15 views17 pages

ThreeJS (2 3) 1

This document provides an overview of creating a 3D scene using Three.js, detailing essential components such as the camera, lights, objects, and materials. It explains how to set up a scene with a WebGL renderer, add geometries like boxes and spheres, and control the camera using OrbitControls. Additionally, it covers animation techniques and the use of rendering methods in Three.js.

Uploaded by

nano.rajab17
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

Three JS

Lab 2+3
Made By : en. George Shammeh
Basic Parts of a 3D Scene

1. Camera - the viewpoint of the user

2. Lights - the scene needs to be lit to be

visible

3. Objects 3D meshes

4. Materials - Applied to the surface of a

3D mesh to fill it in
Creating a scene:
• To actually be able to display anything with three.js, we need three things: scene, camera

and renderer, so that we can render the scene with camera.

• First of all we need something called Render

The WebGL renderer displays your beautifully crafted scenes using WebGL and allocate a

space on a webpage

const render = new THREE.WebGLRenderer();


Creating a scene:
• WebGLRenderer( parameters : Object )

parameters - (optional) object with properties defining the renderer's behaviour. The
constructor also accepts no parameters at all. In all cases, it will assume sane defaults
when parameters are missing.

• One o the parameters is canvas

• As we said in the previous presentation the WebGl used in HTML <canvas> elements so
A canvas (check the link if you want more) where the renderer draws its output. This
corresponds to the domElement property below. If not passed as a parameter here, a
new canvas element will be created.
Creating a scene:
• There are many properties to our Render object but for now we are only interested:

A. domElement : DOMElement

Inject Canvas element (the space we allocate by render) with our page
This is automatically created by the renderer in the constructor (if not provided already);
you just need to add it to your page like so:

document.body.appendChild( renderer.domElement );
Creating a scene:
• There are many properties to our Render object but But for now we are only interested:

• .setSize ( width : Integer, height : Integer, updateStyle : Boolean ) : undefined

Resizes the output canvas to (width, height) with device pixel ratio taken into
account, and also sets the viewport to fit that size, starting in (0, 0).
Setting updateStyle to false prevents any style changes to the output canvas.

render.setSize(window.innerWidth,window.innerHeight);
Summary of the Scene Creation:
• Create a WebGLRenderer:
const render = new
THREE.WebGLRenderer();
• Set The render size:
render.setSize(window.innerWid
th,window.innerHeight);
• Plug it in:
document.body.appendChild(rend
er.domElement);
Camera:
• There are Two Types of Camera
1. PerspectiveCamera (Same as real life Camera) to create it:
const camera = new
THREE.PerspectiveCamera(FieldOfView,window.innerWidth/innerHeight,near,far)

const camera = new


THREE.PerspectiveCamera(75,window.i
nnerWidth/innerHeight,0.1,1000);
Camera:
• There are Two Types of Camera
2. OrthographicCamera
Scene
• Make a Scene :
const scene = new THREE.Scene();
• Add and axes helper to our Scene: (X , Y , Z)
const axs=new THREE.AxesHelper(5);
scene.add(axs);
• Change the position of a Camera:
1) On the X coordinate axis Or on Y Or on Z:
camera.position.z=5;
camera.position.y=2;
2) On all coordinates by one Time:
camera.position.set(-10,30,30);
Shapes In Three js:
• We Can add shape such as box or sphere using Geomerty
• Geometries are used to create and define shapes in Three.js. A geometry is an
instance of the Three.Geometry class
• There is many types of 2D and 3D shapes

• 3D Shapes: • 2D Shapes
1) CubeGeometry 1) PlaneGeometry
2) SphereGeometry 2) CircleGeometry
3) CylinderGeometry 3) RingGeometry
4) TorusGeometry
Shapes In Three js:
• Types of Geometry:
1) Regular Geometry (geometry)
2) Buffer Geometry (BufferGeometry)
• Geometries are easier to work with than BufferGeometries as they store
attributes such as vertices, faces, colors and so on directly (rather than in
buffers), however they are generally slower
• To add a box on our Project:
const boxGeo = new THREE.BoxGeometry();
Materials in Three.js
• Materials manage the texture and color of objects in Three.js. A material
covers an object, the colors, or textures on a surface.
• Three.js provides a plethora of materials, including:
1. MeshBasicMaterial
2. MeshPhongMaterial
3. MeshLambertMaterial
4. MeshNormalMaterial
5. MeshDepthMaterial
6. MeshFaceMaterial
• MeshBasicMaterial is used to display a solid color or a wireframe.
const boxMat= new THREE.MeshBasicMaterial({color : 0x0095DD});
The above displays a solid color of blue.
Add the Shape:
• Finally we add the shape with its material by the mesh objects:
const box= new THREE.Mesh(boxGeo,boxMat);
scene.add(box);
• Same as the sphere object:
const SphGeo = new THREE.SphereGeometry(1,30,30);
const SphMat= new THREE.MeshBasicMaterial({color : 0x00A500});
const Sph= new THREE.Mesh(SphGeo,SphMat);
scene.add(Sph);
• Note: SphereGeometry constructer take the first three parameters as:
1. radius — sphere radius. Default is 1.
2. widthSegments — number of horizontal segments. Minimum value is 3, and the default is 32.
3. heightSegments — number of vertical segments. Minimum value is 2, and the default is 16.

Check the others on this link: https://threejs.org/docs/#api/en/geometries/SphereGeometry


Control The WebPage View:
• We will use OrbitControls
• Orbit controls allow the camera to orbit around a target.
• OrbitControls is an add-on, and must be imported explicitly
import {OrbitControls} from
'three/examples/jsm/controls/OrbitControls'
• Constructor :
OrbitControls( object : Camera, domElement : HTMLDOMElement )
1. object: (required) The camera to be controlled. The camera must not be a child
of another object, unless that object is the scene itself.
2. domElement: The HTML element used for event listeners.
• The property .update () : (Boolean)

Update the controls. Must be called after any manual changes to the camera's
transform
Check the other properties on : https://threejs.org/docs/#examples/en/controls/OrbitControls
Animation:
• It’s a manual Process:
function animate(time) {
requestAnimationFrame( animate );
box.rotation.x = time / 1000;
box.rotation.y = time / 1000;

render.render(scene,camera);
}

render.setAnimationLoop(animate());

• The window.requestAnimationFrame() method tells the browser that you


wish to perform an animation and requests that the browser calls a specified
function to update an animation right before the next repaint. The method takes
a callback as an argument to be invoked before the repaint.
Animation:
• .setAnimationLoop ( callback : Function ) : undefined
callback — The function will be called every available frame. If null is passed it
will stop any already ongoing animation

• To check other rendering methods visit:


https://threejs.org/docs/#api/en/renderers/WebGLRenderer

You might also like