Three.js 3D特效学习

纵饮孤独 提交于 2020-04-06 17:46:00

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

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!