Begin three.js.key
1 like10,104 views
This document provides an introduction to using the Three.js library for 3D graphics in web pages. It explains how to set up a basic Three.js application with a renderer, scene, and camera. It then demonstrates how to add 3D objects, textures, lighting, materials, load 3D models, and perform animations. The document also provides information on topics like cameras, textures, loading different 3D file formats, model conversion, and blending 3D content into HTML.
Begin three.js.key
- 1. BEGIN THREE.JS Yi-Fan Liao Special thanks to 3D modelers @shrimp & @yushen
- 6. RENDERER var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );
- 7. SCENE var scene = new THREE.Scene();
- 8. 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);
- 9. PERSPECTIVE CAMERA 鏡頭與焦距與視⾓角 fov far near aspect = width/height
- 10. OBJECT var geometry = new THREE.CubeGeometry(1,1,1); var material = new THREE.MeshBasicMaterial({ color: 0x199509 }); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh);
- 11. RENDER() function render() { requestAnimationFrame(render); mesh.rotation.x += 0.01; mesh.rotation.y += 0.01; renderer.render(scene, camera); } render(); requestAnimationFrame for Smart Animating Better JavaScript animations with requestAnimationFrame
- 12. CAMERAS Cameras on OpenGL ES 2.x – The ModelViewProjection Matrix
- 13. ADD TEXTURE
- 14. TEXTURE MAP var 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);
- 15. 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);
- 16. LIGHTS
- 17. MATERIALS Lights and Materials inThree.js http://threejs.org/examples/webgl_materials.html MeshBasicMaterial MeshLambertMaterial MeshPhongMaterial
- 18. LOAD A 3D MODEL
- 19. 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); });
- 20. LOADER ColladaLoader 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.
- 21. MODEL CONVERSION EXPORTERS Blender 3DS MAX Maya CONVERTERS To JSON format ctm Autodesk Maya .fbx Wavefront .obj To utf8 format utf8
- 22. ANIMATE A 3D MODEL
- 23. 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());
- 24. 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(); });
- 25. ANIMATIONS
- 26. MORPH Morph animation example on three.js website
- 27. SKELETAL ANIMATION Skinned animation example on three.js website
- 28. BUILD A 3D MENU
- 29. TEXT <script src="fonts/optimer_regular.typeface.js"></script> var textGeometry = new THREE.TextGeometry( text, { ...
- 30. MOUSE EVENT var 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 ) { ...
- 31. BLEND 3D CONTENT IN HTML
- 32. SAMPLE SLOT GAME
- 33. 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
- 34. ABOUT 廖一帆 Front End Engineer begeeben@gmail.com github.com/begeeben Yi-Fan Liao begeeben.wordpress.com/ www.facebook.com/yifan.liao