天天看點
傳回

HTML5 Three.js 3D特效

一、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

[html]  view plain copy

  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4. <title>Template (Three.js)</title>  
  5. <meta charset="utf-8">  
  6. <meta name="viewport"  
  7.     content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">  
  8. <link rel=stylesheet href="css/base.css" />  
  9. </head>  
  10. <body>  
  11.     <script src="../js/Three.js"></script> <!-- 這個是Three.js引擎的js -->  
  12.     <script src="../js/Detector.js"></script>  
  13.     <script src="../js/Stats.js"></script>  
  14.     <script src="../js/OrbitControls.js"></script>  
  15.     <script src="../js/THREEx.KeyboardState.js"></script>  
  16.     <script src="../js/THREEx.FullScreen.js"></script>  
  17.     <script src="../js/THREEx.WindowResize.js"></script>  
  18.     <script src="../js/Texture.js"></script> <!-- 一些js工具類，現在不深究 -->  
  19.     <div id="ThreeJS"  
  20.         style="z-index: 1; position: absolute; left: 0px; top: 0px"></div> <!-- 這個div就是整個畫布 -->  
  21.     <script>  
  22.         //      
  23.         // MAIN //  
  24.         //  
  25.         // standard global variables  
  26.         var container, scene, camera, renderer, controls, stats; // 幾個變量代表的含義：容器、場景、錄影機（視角）、渲染器、控制裝置  
  27.         var keyboard = new THREEx.KeyboardState();  
  28.         var clock = new THREE.Clock();  
  29.         // custom global variables  
  30.         var cube;  
  31.         // initialization  
  32.         init();  
  33.         // animation loop / game loop  
  34.         animate();  
  35.         ///  
  36.         // FUNCTIONS //  
  37.         ///  
  38.         function init() { // 初始化  
  39.             ///  
  40.             // SCENE //  
  41.             ///  
  42.             scene = new THREE.Scene(); // 定義場景  
  43.             // CAMERA //  
  44.             // set the view size in pixels (custom or according to window size)  
  45.             // var SCREEN_WIDTH = 400, SCREEN_HEIGHT = 300;  
  46.             var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;  
  47.             // camera attributes  
  48.             var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;  
  49.             // set up camera  
  50.             camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); // 定義視角  
  51.             // add the camera to the scene  
  52.             scene.add(camera);  
  53.             // the camera defaults to position (0,0,0)  
  54.             // so pull it back (z = 400) and up (y = 100) and set the angle towards the scene origin  
  55.             camera.position.set(-400, 150, 200); // 視角的位置  
  56.             camera.lookAt(scene.position);  
  57.             //  
  58.             // RENDERER //  
  59.             //  
  60.             // create and start the renderer; choose antialias setting.  
  61.             if (Detector.webgl)  
  62.                 renderer = new THREE.WebGLRenderer({  
  63.                     antialias : true  
  64.                 });  
  65.             else  
  66.                 renderer = new THREE.CanvasRenderer();  
  67.             renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);  
  68.             // attach div element to variable to contain the renderer  
  69.             container = document.getElementById('ThreeJS');  
  70.             // alternatively: to create the div at runtime, use:  
  71.             // container = document.createElement( 'div' );  
  72.             // document.body.appendChild( container );  
  73.             // attach renderer to the container div  
  74.             container.appendChild(renderer.domElement);  
  75.             // EVENTS //  
  76.             // automatically resize renderer  
  77.             THREEx.WindowResize(renderer, camera);  
  78.             // toggle full-screen on given key press  
  79.             THREEx.FullScreen.bindKey({  
  80.                 charCode : 'm'.charCodeAt(0)  
  81.             });  
  82.             //  
  83.             // CONTROLS //  
  84.             //  
  85.             // move mouse and: left   click to rotate,   
  86.             //                 middle click to zoom,   
  87.             //                 right  click to pan  
  88.             controls = new THREE.OrbitControls(camera, renderer.domElement); // 設定控制，這裡隻有滑鼠操作  
  89.             ///  
  90.             // STATS //  
  91.             ///  
  92.             // displays current and past frames per second attained by scene  
  93.             stats = new Stats();  
  94.             stats.domElement.style.position = 'absolute';  
  95.             stats.domElement.style.bottom = '0px';  
  96.             stats.domElement.style.zIndex = 100;  
  97.             container.appendChild(stats.domElement);  
  98.             ///  
  99.             // LIGHT //  
  100.             ///  
  101.             // create a light  
  102.             var light = new THREE.PointLight(0xffffff); // 設定光源  
  103.             light.position.set(0, 250, 0);  
  104.             scene.add(light);  
  105.             // CUBE  
  106.             var cubeGeometry = new THREE.CubeGeometry(260, 35, 185, 1, 1, 1); // 定義一個立方體，就是那本書的模型  
  107.             var cubeMaterialArray = [];  
  108.             cubeMaterialArray.push(new THREE.MeshBasicMaterial({  
  109.                 map : new THREE.ImageUtils.loadTexture('img/side-up.png') // 給每一面上貼圖，下同  
  110.             }));  
  111.             cubeMaterialArray.push(new THREE.MeshBasicMaterial({  
  112.                 map : new THREE.ImageUtils.loadTexture('img/side-up.png')  
  113.             }));  
  114.             cubeMaterialArray.push(new THREE.MeshBasicMaterial({  
  115.                 map : new THREE.ImageUtils.loadTexture('img/up.png')  
  116.             }));  
  117.             cubeMaterialArray.push(new THREE.MeshBasicMaterial({  
  118.                 map : new THREE.ImageUtils.loadTexture('img/down.png')  
  119.             }));  
  120.             cubeMaterialArray.push(new THREE.MeshBasicMaterial({  
  121.                 map : new THREE.ImageUtils.loadTexture('img/side-right.png')  
  122.             }));  
  123.             cubeMaterialArray.push(new THREE.MeshBasicMaterial({  
  124.                 map : new THREE.ImageUtils.loadTexture('img/side-left.png')  
  125.             }));  
  126.             var cubeMaterials = new THREE.MeshFaceMaterial(cubeMaterialArray);  
  127.             cube = new THREE.Mesh(cubeGeometry, cubeMaterials);  
  128.             cube.position.set(0, 0, 0); // 立方體放置的位置  
  129.             scene.add(cube);  
  130.         }  
  131.         function animate() {  
  132.             requestAnimationFrame(animate);  
  133.             render();  
  134.             update();  
  135.         }  
  136.         function update() {  
  137.             // delta = change in time since last call (in seconds)  
  138.             var delta = clock.getDelta();  
  139.             controls.update();  
  140.             stats.update();  
  141.         }  
  142.         function render() {  
  143.             renderer.render(scene, camera);  
  144.         }  
  145.     </script>  
  146. </body>  
  147. </html>  

效果圖：

HTML5 Three.js 3D特效
three.js
上一篇: three.js旋轉的3D文字canvas_geometry_text
下一篇: django模型中設定資料庫字段預設值

繼續閱讀