begin three.js.key
DESCRIPTION
TRANSCRIPT
![Page 1: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/1.jpg)
BEGIN THREE.JSYi-Fan Liao
Special thanks to 3D modelers @shrimp & @yushen
![Page 2: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/2.jpg)
http://mrdoob.github.com/three.js/
![Page 3: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/3.jpg)
DEMO LINK
http://begeeben.github.io/begin-threejs/
![Page 4: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/4.jpg)
SOURCE CODE
https://github.com/begeeben/begin-threejs
![Page 5: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/5.jpg)
A SIMPLE EXAMPLE
![Page 6: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/6.jpg)
RENDERERvar renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
![Page 7: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/7.jpg)
SCENE
var scene = new THREE.Scene();
![Page 8: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/8.jpg)
CAMERA// new THREE.PerspectiveCamera(fov, aspect, near, far)var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
![Page 9: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/9.jpg)
PERSPECTIVE CAMERA
鏡頭與焦距與視⾓角
fov
far
near
aspect = width/height
![Page 10: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/10.jpg)
OBJECTvar geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({ color: 0x199509});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
![Page 11: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/11.jpg)
RENDER()function render() { requestAnimationFrame(render); mesh.rotation.x += 0.01; mesh.rotation.y += 0.01; renderer.render(scene, camera);}
render();
requestAnimationFrame for Smart AnimatingBetter JavaScript animations with requestAnimationFrame
![Page 12: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/12.jpg)
CAMERAS
Cameras on OpenGL ES 2.x – The ModelViewProjection Matrix
![Page 13: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/13.jpg)
ADD TEXTURE
![Page 14: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/14.jpg)
TEXTURE MAPvar geometry = new THREE.CubeGeometry(1,1,1);
// Load image and create texture.var imgUrl = 'images/jumper.jpg';var map = THREE.ImageUtils.loadTexture(imgUrl);// For shiny surfaces.var material = new THREE.MeshPhongMaterial({ map: map });
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
![Page 15: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/15.jpg)
LIGHT// Directional light affects objects using MeshLambertMaterial or MeshPhongMaterial.var light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 0, 0, 1 );
scene.add(light);
![Page 16: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/16.jpg)
LIGHTS
![Page 17: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/17.jpg)
MATERIALS
Lights and Materials in Three.jshttp://threejs.org/examples/webgl_materials.html
MeshBasicMaterial
MeshLambertMaterial
MeshPhongMaterial
![Page 18: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/18.jpg)
LOAD A 3D MODEL
![Page 19: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/19.jpg)
3D MODEL// Load ufo image.var ufoMap = THREE.ImageUtils.loadTexture(
'models/ufo/textures/ufo.png');var ufoMaterial = new THREE.MeshPhongMaterial({map:ufoMap});
// Load ufo 3D JSON model.var ufo;var loader = new THREE.JSONLoader();loader.load('models/ufo/ufo.js', function(geometry) { ufo = new THREE.Mesh(geometry, ufoMaterial); scene.add(ufo);});
![Page 20: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/20.jpg)
LOADERColladaLoader for Collada(.dae): An XML-‐based schema to make it easy to transport 3D assets be-‐tween applications.
JSONLoader for JSON Model Format: More concise and loading is faster than using COLLADA because browsers can load it directly into JavaScript data structures.
BinaryLoader for Binary Model Format: The binary equivalent to text-‐based JSON format but smaller in size.
UTF8Loader for UTF-‐8 Encoded Format: An even more economical data format.
SceneLoader for JSON Scene Format: The format able to store multiple models or an entire scene, including lights, camera... etc.
![Page 21: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/21.jpg)
MODEL CONVERSIONEXPORTERS
Blender 3DS MAX Maya
CONVERTERS
To JSON format ctm Autodesk Maya .fbx Wavefront .obj
To utf8 format utf8
![Page 22: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/22.jpg)
ANIMATE A 3D MODEL
![Page 23: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/23.jpg)
MORPH EXAMPLE// Load 3D model.var loadCounter = 2;
function checkLoadingComplete() { loadCounter -‐= 1; if(loadCounter === 0) scene.add(boyMesh);};
// Textures.// How the image is applied to the object.var mapping = new THREE.UVMapping();var boyMap = THREE.ImageUtils.loadTexture(
'models/boy/textures/boy.png', mapping, checkLoadingComplete());
![Page 24: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/24.jpg)
MORPH EXAMPLE// Body.var boyMesh;var loader = new THREE.JSONLoader();
loader.load('models/boy/boy.js', function(geometry) { geometry.computeMorphNormals();
var materialBoy = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0x111111, shininess: 50, map: boyMap, morphTargets: true, morphNormals: true, wrapAround: true });
boyMesh = new THREE.MorphAnimMesh(geometry, materialBoy);
boyMesh.castShadow = true; boyMesh.receiveShadow = true; // Parse animations in the model file. boyMesh.parseAnimations(); boyMesh.playAnimation( geometry.firstAnimation, 30 );
checkLoadingComplete();});
![Page 25: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/25.jpg)
ANIMATIONS
![Page 26: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/26.jpg)
MORPH
Morph animation example on three.js website
![Page 27: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/27.jpg)
SKELETAL ANIMATION
Skinned animation example on three.js website
![Page 28: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/28.jpg)
BUILD A 3D MENU
![Page 29: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/29.jpg)
TEXT
<script src="fonts/optimer_regular.typeface.js"></script>
var textGeometry = new THREE.TextGeometry( text, { ...
![Page 30: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/30.jpg)
MOUSE EVENTvar projector = new THREE.Projector();var mouse = new THREE.Vector2();
mouse.x = ( event.clientX / container.clientWidth ) * 2 -‐ 1;mouse.y = -‐ ( event.clientY / container.clientHeight ) * 2 + 1;
// Unproject the screen space mouse point to 3D world space.var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );// Cast a ray from the camera according to the vector.var raycaster = projector.pickingRay( vector.clone(), camera );// Get objects that intersects the ray.var intersects = raycaster.intersectObjects( items, true );
if ( intersects.length > 0 ) { ...
![Page 31: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/31.jpg)
BLEND 3D CONTENT IN HTML
![Page 32: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/32.jpg)
SAMPLE SLOT GAME
![Page 33: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/33.jpg)
RESOURCES WebGL: Up and Running
Tools https://github.com/sole/tween.js three.js boilerplate THREECONVERT OSX BATCH EXPORTER UTILITY FOR THREE.JS MD2 to JSON Converter
Show Cases Verold STUDIO Simple facial rigging utilizing morph targets WebGL -‐ Three.js + impactJS
Tutorials Building the Game: Part 3 -‐ Skinning & Animation Verification of using multiple textures with three.js
cubes
![Page 34: Begin three.js.key](https://reader034.vdocument.in/reader034/viewer/2022051412/54b79f9d4a795993718b4680/html5/thumbnails/34.jpg)
ABOUT廖一帆
Front End Engineer
github.com/begeeben
Yi-Fan Liao
begeeben.wordpress.com/
www.facebook.com/yifan.liao