Three.js 3D特效学习

jopen 11年前

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