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
<!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> </pre> <p></p>
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！