Intro to THREE.js Dr. Mihail November 2, 2015 (Dr. Mihail) - - PowerPoint PPT Presentation

▶

intro to three js

Intro to THREE.js Dr. Mihail November 2, 2015 (Dr. Mihail) - - PowerPoint PPT Presentation

Feb 27, 2024 269 likes •559 views

Intro to THREE.js Dr. Mihail November 2, 2015 (Dr. Mihail) THREE.js November 2, 2015 1 / 18 What is THREE High-level library built on top of WebGL. THREE makes it possible to author complex 3D graphics with minimal effort. (Dr. Mihail)

slide-1

SLIDE 1

Intro to THREE.js

Dr. Mihail

November 2, 2015

(Dr. Mihail) THREE.js November 2, 2015 1 / 18

slide-2

SLIDE 2

What is THREE

High-level library built on top of WebGL. THREE makes it possible to author complex 3D graphics with minimal effort.

(Dr. Mihail) THREE.js November 2, 2015 2 / 18

slide-3

SLIDE 3

What is THREE

High-level library built on top of WebGL. THREE makes it possible to author complex 3D graphics with minimal effort. Features: Highly object oriented

(Dr. Mihail) THREE.js November 2, 2015 2 / 18

slide-4

SLIDE 4

What is THREE

High-level library built on top of WebGL. THREE makes it possible to author complex 3D graphics with minimal effort. Features: Highly object oriented Many built in effects

(Dr. Mihail) THREE.js November 2, 2015 2 / 18

slide-5

SLIDE 5

What is THREE

High-level library built on top of WebGL. THREE makes it possible to author complex 3D graphics with minimal effort. Features: Highly object oriented Many built in effects Implements the concept of “scene” to which you can add/remove

bjects during runtime

(Dr. Mihail) THREE.js November 2, 2015 2 / 18

slide-6

SLIDE 6

What is THREE

High-level library built on top of WebGL. THREE makes it possible to author complex 3D graphics with minimal effort. Features: Highly object oriented Many built in effects Implements the concept of “scene” to which you can add/remove

bjects during runtime

Cameras

(Dr. Mihail) THREE.js November 2, 2015 2 / 18

slide-7

SLIDE 7

What is THREE

High-level library built on top of WebGL. THREE makes it possible to author complex 3D graphics with minimal effort. Features: Highly object oriented Many built in effects Implements the concept of “scene” to which you can add/remove

bjects during runtime

Cameras Animation (skinning, forward kinematics, inverse kinematics, morph, keyframe, etc.)

(Dr. Mihail) THREE.js November 2, 2015 2 / 18

slide-8

SLIDE 8

What is THREE

High-level library built on top of WebGL. THREE makes it possible to author complex 3D graphics with minimal effort. Features: Highly object oriented Many built in effects Implements the concept of “scene” to which you can add/remove

bjects during runtime

Cameras Animation (skinning, forward kinematics, inverse kinematics, morph, keyframe, etc.) Lights

(Dr. Mihail) THREE.js November 2, 2015 2 / 18

slide-9

SLIDE 9

What is THREE

High-level library built on top of WebGL. THREE makes it possible to author complex 3D graphics with minimal effort. Features: Highly object oriented Many built in effects Implements the concept of “scene” to which you can add/remove

bjects during runtime

Cameras Animation (skinning, forward kinematics, inverse kinematics, morph, keyframe, etc.) Lights Materials

(Dr. Mihail) THREE.js November 2, 2015 2 / 18

slide-10

SLIDE 10

What is THREE

High-level library built on top of WebGL. THREE makes it possible to author complex 3D graphics with minimal effort. Features: Highly object oriented Many built in effects Implements the concept of “scene” to which you can add/remove

bjects during runtime

Cameras Animation (skinning, forward kinematics, inverse kinematics, morph, keyframe, etc.) Lights Materials Shaders (access to full GLSL)

(Dr. Mihail) THREE.js November 2, 2015 2 / 18

slide-11

SLIDE 11

What is THREE

High-level library built on top of WebGL. THREE makes it possible to author complex 3D graphics with minimal effort. Features: Highly object oriented Many built in effects Implements the concept of “scene” to which you can add/remove

bjects during runtime

Cameras Animation (skinning, forward kinematics, inverse kinematics, morph, keyframe, etc.) Lights Materials Shaders (access to full GLSL) Geometry (plane, cube, sphere, torus, 3D text)

(Dr. Mihail) THREE.js November 2, 2015 2 / 18

slide-12

SLIDE 12

What is THREE

High-level library built on top of WebGL. THREE makes it possible to author complex 3D graphics with minimal effort. Features: Highly object oriented Many built in effects Implements the concept of “scene” to which you can add/remove

bjects during runtime

Cameras Animation (skinning, forward kinematics, inverse kinematics, morph, keyframe, etc.) Lights Materials Shaders (access to full GLSL) Geometry (plane, cube, sphere, torus, 3D text) Data loaders (textuers and models)

(Dr. Mihail) THREE.js November 2, 2015 2 / 18

slide-13

SLIDE 13

THREE

Basic idea

Scene Camera Lights Action

(Dr. Mihail) THREE.js November 2, 2015 3 / 18

slide-14

SLIDE 14

Download

Download three.js

threejs.org The download will contain all the source code, including examples, etc. You need the ./build folder.

(Dr. Mihail) THREE.js November 2, 2015 4 / 18

slide-15

SLIDE 15

HTML

Basics: index.html

1 2 <!DOCTYPE html > 3 <html > 4 <head > 5 <link rel="stylesheet" href="./ style.css"> 6 <script src="./ three.js" ></script > 7 </head > 8 <body > 9 <script src="./ main.js" ></script > 10 </body > 11 </html >

(Dr. Mihail) THREE.js November 2, 2015 5 / 18

slide-16

SLIDE 16

HTML

Basics: index.html

1 2 <!DOCTYPE html > 3 <html > 4 <head > 5 <link rel="stylesheet" href="./ style.css"> 6 <script src="./ three.js" ></script > 7 </head > 8 <body > 9 <script src="./ main.js" ></script > 10 </body > 11 </html >

(Dr. Mihail) THREE.js November 2, 2015 6 / 18

slide-17

SLIDE 17

HTML

Basics: style.css

1 canvas { 2 position: fixed; 3 top: 0; 4 left: 0; 5 }

(Dr. Mihail) THREE.js November 2, 2015 7 / 18

slide-18

SLIDE 18

HTML

Basics: main.js

1 2 // initialize WebGL and THREE renderer 3 4 var width = window.innerWidth; 5 var height = window.innerHeight; 6 7 8 var renderer = new THREE. WebGLRenderer ({ antialias: true }); 9 renderer.setSize(width , height); 10 document.body.appendChild(renderer.domElement);

(Dr. Mihail) THREE.js November 2, 2015 8 / 18

slide-19

SLIDE 19

HTML

Basics: main.js

1 2 // initialize WebGL and THREE renderer 3 4 var width = window.innerWidth; 5 var height = window.innerHeight; 6 7 8 var renderer = new THREE. WebGLRenderer ({ antialias: true }); 9 renderer.setSize(width , height); 10 document.body.appendChild(renderer.domElement);

(Dr. Mihail) THREE.js November 2, 2015 9 / 18

slide-20

SLIDE 20

Scene

Basics: main.js

1 2 // create scene

bject

3 var scene = new THREE.Scene; 4 5 // create simple geometry and add to scene 6 var cubeGeometry = new THREE. CubeGeometry (15,15, 15); 7 var cubeMaterial = new THREE. MeshLambertMaterial ({ color: 0xaaff44 }); 8 var cube = new THREE.Mesh(cubeGeometry , cubeMaterial ); 9 scene.add(cube);

(Dr. Mihail) THREE.js November 2, 2015 10 / 18

slide-21

SLIDE 21

Camera

Basics: main.js

1 // create perspective camera 2 var camera = new THREE. PerspectiveCamera (45, width / height , 0.1, 10000); 3 camera.position.y = 16; 4 camera.position.z = 40; 5 // add to scene and renderer 6 scene.add(camera); 7 renderer.render(scene , camera); 8 // create the view matrix (lookAt) 9 camera.lookAt(cube.position);

(Dr. Mihail) THREE.js November 2, 2015 11 / 18

slide-22

SLIDE 22

Lights

Basics: main.js

1 // add lighting and add to scene 2 var pointLight = new THREE.PointLight (0 xaabbcc); 3 pointLight.position.set(0, 16, 16); 4 scene.add(pointLight);

(Dr. Mihail) THREE.js November 2, 2015 12 / 18

slide-23

SLIDE 23

Action

Basics: main.js

1 renderer.render(scene , camera); 2 function render () { 3 renderer.render(scene , camera); 4 requestAnimationFrame (render); 5 cube.rotation.y+=0.01; // animate 6 } 7 render ();

(Dr. Mihail) THREE.js November 2, 2015 13 / 18

slide-24

SLIDE 24

Textures

Basics: main.js

1 var cubeMaterial = new THREE. MeshLambertMaterial ({ map: THREE.ImageUtils. loadTexture(’crate.jpg’)});

(Dr. Mihail) THREE.js November 2, 2015 14 / 18

slide-25

SLIDE 25

Models

3D Models

Asynchronously: Load the model’s texture maps Load the model Add to scene

(Dr. Mihail) THREE.js November 2, 2015 15 / 18

slide-26

SLIDE 26

Textures

Basics: main.js

1 var texture = new THREE.Texture (); 2 var loader = new THREE.ImageLoader( manager ); 3 loader.load( ’UV_Grid_Sm.jpg’, function ( image ) { 4 texture.image = image; 5 texture.needsUpdate = true; 6 } );

(Dr. Mihail) THREE.js November 2, 2015 16 / 18

slide-27

SLIDE 27

Model

Housekeeping

1 var manager = new THREE. LoadingManager (); 2 manager.onProgress = function ( item , loaded , total ) { 3 console.log( item , loaded , total ); 4 }; 5 var

nProgress = function ( xhr ) {

6 if ( xhr. lengthComputable ) { 7 var percentComplete = xhr.loaded / xhr.total * 100; 8 console.log( Math.round(percentComplete , 2) + ’% downloaded ’ ); 9 } 10 }; 11 var

nError = function ( xhr ) { };

(Dr. Mihail) THREE.js November 2, 2015 17 / 18

slide-28

SLIDE 28

Model

Loading the model

1 var loader = new THREE.OBJLoader( manager ); 2 loader.load( ’male02.obj’, function ( object ) { 3

bject.scale.set (0.5 , 0.5, 0.5);

4

bject.position.y =
50;

5

bject.traverse( function ( child ) {

6 if ( child instanceof THREE.Mesh ) { 7 child.material.map = texture; 8 } 9 } ); 10 scene.add( object ); 11 }, onProgress , onError );

(Dr. Mihail) THREE.js November 2, 2015 18 / 18