Three.js 3D特效学习
jopen
10年前
一、Three.js基本介绍
Three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。不过，这款引擎目前还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏，基本没有中文的）Three.js的代码托管在github上面。
二、基本 Demo
1.最基本的Hello World：http://stemkoski.github.io/Three.js/HelloWorld.html
2.在网页上调用摄像头：http://stemkoski.github.io/Three.js/Webcam-Texture.html
3.体感操作：http://stemkoski.github.io/Three.js/Webcam-Motion-Detection-Texture.html
4.支持游戏手柄：http://stemkoski.github.io/Three.js/Mesh-Movement-Gamepad.html
5.3D建模和方向键控制移动方向：http://stemkoski.github.io/Three.js/Model-Animation-Control.html
6.SkyBox和三个气泡的渲染：http://stemkoski.github.io/Three.js/Metabubbles.html
7.3D红蓝偏光的名车展：http://threejs.org/examples/webgl_materials_cars_anaglyph.html
8.跑车游戏：http://hexgl.bkcore.com/
三、Three.js编写环境准备
1.Three.js库文件下载：https://github.com/mrdoob/three.js/
2.已安装IIS或Tomcat或Apache，这些例子必须挂到服务器上才能正常运行，本地打开会出现各种无法理解的问题。
四、动手编写第一个 Demo
<!doctype html> <html lang="en"> <head> <title>Template (Three.js)</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <link rel=stylesheet href="css/base.css" /> </head> <body> <script src="../js/Three.js"></script> <!-- 这个是Three.js引擎的js --> <script src="../js/Detector.js"></script> <script src="../js/Stats.js"></script> <script src="../js/OrbitControls.js"></script> <script src="../js/THREEx.KeyboardState.js"></script> <script src="../js/THREEx.FullScreen.js"></script> <script src="../js/THREEx.WindowResize.js"></script> <script src="../js/Texture.js"></script> <!-- 一些js工具类，现在不深究 --> <div id="ThreeJS" style="z-index: 1; position: absolute; left: 0px; top: 0px"></div> <!-- 这个div就是整个画布 --> <script> ////////// // MAIN // ////////// // standard global variables var container, scene, camera, renderer, controls, stats; // 几个变量代表的含义：容器、场景、摄像机（视角）、渲染器、控制装置 var keyboard = new THREEx.KeyboardState(); var clock = new THREE.Clock(); // custom global variables var cube; // initialization init(); // animation loop / game loop animate(); /////////////// // FUNCTIONS // /////////////// function init() { // 初始化 /////////// // SCENE // /////////// scene = new THREE.Scene(); // 定义场景 //////////// // CAMERA // //////////// // set the view size in pixels (custom or according to window size) // var SCREEN_WIDTH = 400, SCREEN_HEIGHT = 300; var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight; // camera attributes var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000; // set up camera camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); // 定义视角 // add the camera to the scene scene.add(camera); // the camera defaults to position (0,0,0) // so pull it back (z = 400) and up (y = 100) and set the angle towards the scene origin camera.position.set(-400, 150, 200); // 视角的位置 camera.lookAt(scene.position); ////////////// // RENDERER // ////////////// // create and start the renderer; choose antialias setting. if (Detector.webgl) renderer = new THREE.WebGLRenderer({ antialias : true }); else renderer = new THREE.CanvasRenderer(); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); // attach div element to variable to contain the renderer container = document.getElementById('ThreeJS'); // alternatively: to create the div at runtime, use: // container = document.createElement( 'div' ); // document.body.appendChild( container ); // attach renderer to the container div container.appendChild(renderer.domElement); //////////// // EVENTS // //////////// // automatically resize renderer THREEx.WindowResize(renderer, camera); // toggle full-screen on given key press THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) }); ////////////// // CONTROLS // ////////////// // move mouse and: left click to rotate, // middle click to zoom, // right click to pan controls = new THREE.OrbitControls(camera, renderer.domElement); // 设置控制，这里只有鼠标操作 /////////// // STATS // /////////// // displays current and past frames per second attained by scene stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.bottom = '0px'; stats.domElement.style.zIndex = 100; container.appendChild(stats.domElement); /////////// // LIGHT // /////////// // create a light var light = new THREE.PointLight(0xffffff); // 设置光源 light.position.set(0, 250, 0); scene.add(light); // CUBE var cubeGeometry = new THREE.CubeGeometry(260, 35, 185, 1, 1, 1); // 定义一个立方体，就是那本书的模型 var cubeMaterialArray = []; cubeMaterialArray.push(new THREE.MeshBasicMaterial({ map : new THREE.ImageUtils.loadTexture('img/side-up.png') // 给每一面上贴图，下同 })); cubeMaterialArray.push(new THREE.MeshBasicMaterial({ map : new THREE.ImageUtils.loadTexture('img/side-up.png') })); cubeMaterialArray.push(new THREE.MeshBasicMaterial({ map : new THREE.ImageUtils.loadTexture('img/up.png') })); cubeMaterialArray.push(new THREE.MeshBasicMaterial({ map : new THREE.ImageUtils.loadTexture('img/down.png') })); cubeMaterialArray.push(new THREE.MeshBasicMaterial({ map : new THREE.ImageUtils.loadTexture('img/side-right.png') })); cubeMaterialArray.push(new THREE.MeshBasicMaterial({ map : new THREE.ImageUtils.loadTexture('img/side-left.png') })); var cubeMaterials = new THREE.MeshFaceMaterial(cubeMaterialArray); cube = new THREE.Mesh(cubeGeometry, cubeMaterials); cube.position.set(0, 0, 0); // 立方体放置的位置 scene.add(cube); } function animate() { requestAnimationFrame(animate); render(); update(); } function update() { // delta = change in time since last call (in seconds) var delta = clock.getDelta(); controls.update(); stats.update(); } function render() { renderer.render(scene, camera); } </script> </body> </html> 来自：http://blog.csdn.net/techzero/article/details/9362263