zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    poj 3616 Milking Time
    poj 3176 Cow Bowling
    poj 2229 Sumsets
    poj 2385 Apple Catching
    poj 3280 Cheapest Palindrome
    hdu 1530 Maximum Clique
    hdu 1102 Constructing Roads
    codeforces 592B The Monster and the Squirrel
    CDOJ 1221 Ancient Go
    hdu 1151 Air Raid(二分图最小路径覆盖)
  • 原文地址:https://www.cnblogs.com/goldenstones/p/4819811.html
Copyright © 2011-2022 走看看