HTML5 Three.js 3D特效

最新推荐文章于 2024-03-05 11:55:57 发布

cc蒲公英

最新推荐文章于 2024-03-05 11:55:57 发布

阅读量5.4k

点赞数

文章标签： Three.js 3D Three 3D

本文链接：https://blog.csdn.net/cddcj/article/details/53736188

版权

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

效果图：

官网：https://threejs.org/

GitHub：https://github.com/mrdoob/three.js/

cc蒲公英

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Three.js 3D特效

一、Three.js基本介绍Three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。不过，这款引擎目前还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤
复制链接

扫一扫