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

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <title>Template (Three.js)</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport"
  7.     content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  8. <link rel=stylesheet href="css/base.css" />
  9. </head> 
  10.  
  11. <body>
  12.     <script src="../js/Three.js"></script> <!-- 这个是Three.js引擎的js -->
  13.     <script src="../js/Detector.js"></script>
  14.     <script src="../js/Stats.js"></script>
  15.     <script src="../js/OrbitControls.js"></script>
  16.     <script src="../js/THREEx.KeyboardState.js"></script>
  17.     <script src="../js/THREEx.FullScreen.js"></script>
  18.     <script src="../js/THREEx.WindowResize.js"></script>
  19.     <script src="../js/Texture.js"></script> <!-- 一些js工具类，现在不深究 --> 
  20.  
  21.     <div id="ThreeJS"
  22.         style="z-index: 1; position: absolute; left: 0px; top: 0px"></div> <!-- 这个div就是整个画布 -->
  23.     <script>
  24.         //////////
  25.         // MAIN //
  26.         //////////
  27.         // standard global variables
  28.         var container, scene, camera, renderer, controls, stats; // 几个变量代表的含义：容器、场景、摄像机（视角）、渲染器、控制装置
  29.         var keyboard = new THREEx.KeyboardState();
  30.         var clock = new THREE.Clock(); 
  31.  
  32.         // custom global variables
  33.         var cube; 
  34.  
  35.         // initialization
  36.         init(); 
  37.  
  38.         // animation loop / game loop
  39.         animate(); 
  40.  
  41.         ///////////////
  42.         // FUNCTIONS //
  43.         /////////////// 
  44.  
  45.         function init() { // 初始化
  46.             ///////////
  47.             // SCENE //
  48.             ///////////
  49.             scene = new THREE.Scene(); // 定义场景 
  50.  
  51.             ////////////
  52.             // CAMERA //
  53.             //////////// 
  54.  
  55.             // set the view size in pixels (custom or according to window size)
  56.             // var SCREEN_WIDTH = 400, SCREEN_HEIGHT = 300;
  57.             var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
  58.             // camera attributes
  59.             var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
  60.             // set up camera
  61.             camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); // 定义视角
  62.             // add the camera to the scene
  63.             scene.add(camera);
  64.             // the camera defaults to position (0,0,0)
  65.             // so pull it back (z = 400) and up (y = 100) and set the angle towards the scene origin
  66.             camera.position.set(-400, 150, 200); // 视角的位置
  67.             camera.lookAt(scene.position); 
  68.  
  69.             //////////////
  70.             // RENDERER //
  71.             ////////////// 
  72.  
  73.             // create and start the renderer; choose antialias setting.
  74.             if (Detector.webgl)
  75.                 renderer = new THREE.WebGLRenderer({
  76.                     antialias : true
  77.                 });
  78.             else
  79.                 renderer = new THREE.CanvasRenderer(); 
  80.  
  81.             renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); 
  82.  
  83.             // attach div element to variable to contain the renderer
  84.             container = document.getElementById('ThreeJS');
  85.             // alternatively: to create the div at runtime, use:
  86.             // container = document.createElement( 'div' );
  87.             // document.body.appendChild( container ); 
  88.  
  89.             // attach renderer to the container div
  90.             container.appendChild(renderer.domElement); 
  91.  
  92.             ////////////
  93.             // EVENTS //
  94.             //////////// 
  95.  
  96.             // automatically resize renderer
  97.             THREEx.WindowResize(renderer, camera);
  98.             // toggle full-screen on given key press
  99.             THREEx.FullScreen.bindKey({
  100.                 charCode : 'm'.charCodeAt(0)
  101.             }); 
  102.  
  103.             //////////////
  104.             // CONTROLS //
  105.             ////////////// 
  106.  
  107.             // move mouse and: left   click to rotate,
  108.             //                 middle click to zoom,
  109.             //                 right  click to pan
  110.             controls = new THREE.OrbitControls(camera, renderer.domElement); // 设置控制，这里只有鼠标操作 
  111.  
  112.             ///////////
  113.             // STATS //
  114.             /////////// 
  115.  
  116.             // displays current and past frames per second attained by scene
  117.             stats = new Stats();
  118.             stats.domElement.style.position = 'absolute';
  119.             stats.domElement.style.bottom = '0px';
  120.             stats.domElement.style.zIndex = 100;
  121.             container.appendChild(stats.domElement); 
  122.  
  123.             ///////////
  124.             // LIGHT //
  125.             /////////// 
  126.  
  127.             // create a light
  128.             var light = new THREE.PointLight(0xffffff); // 设置光源
  129.             light.position.set(0, 250, 0);
  130.             scene.add(light); 
  131.  
  132.             // CUBE
  133.             var cubeGeometry = new THREE.CubeGeometry(260, 35, 185, 1, 1, 1); // 定义一个立方体，就是那本书的模型 
  134.  
  135.             var cubeMaterialArray = [];
  136.             cubeMaterialArray.push(new THREE.MeshBasicMaterial({
  137.                 map : new THREE.ImageUtils.loadTexture('img/side-up.png') // 给每一面上贴图，下同
  138.             }));
  139.             cubeMaterialArray.push(new THREE.MeshBasicMaterial({
  140.                 map : new THREE.ImageUtils.loadTexture('img/side-up.png')
  141.             }));
  142.             cubeMaterialArray.push(new THREE.MeshBasicMaterial({
  143.                 map : new THREE.ImageUtils.loadTexture('img/up.png')
  144.             }));
  145.             cubeMaterialArray.push(new THREE.MeshBasicMaterial({
  146.                 map : new THREE.ImageUtils.loadTexture('img/down.png')
  147.             }));
  148.             cubeMaterialArray.push(new THREE.MeshBasicMaterial({
  149.                 map : new THREE.ImageUtils.loadTexture('img/side-right.png')
  150.             }));
  151.             cubeMaterialArray.push(new THREE.MeshBasicMaterial({
  152.                 map : new THREE.ImageUtils.loadTexture('img/side-left.png')
  153.             }));
  154.             var cubeMaterials = new THREE.MeshFaceMaterial(cubeMaterialArray); 
  155.  
  156.             cube = new THREE.Mesh(cubeGeometry, cubeMaterials);
  157.             cube.position.set(0, 0, 0); // 立方体放置的位置
  158.             scene.add(cube); 
  159.  
  160.         } 
  161.  
  162.         function animate() {
  163.             requestAnimationFrame(animate);
  164.             render();
  165.             update();
  166.         } 
  167.  
  168.         function update() {
  169.             // delta = change in time since last call (in seconds)
  170.             var delta = clock.getDelta(); 
  171.  
  172.             controls.update();
  173.             stats.update();
  174.         } 
  175.  
  176.         function render() {
  177.             renderer.render(scene, camera);
  178.         }
  179.     </script> 
  180.  
  181. </body>
  182. </html>

Three.js 3D特效学习的更多相关文章

  1. Cocos2d-x学习笔记（十二）3D特效

    特效类即是GridAction类,其实就是基于网格的3D动作类.需开启OpenGL的深度缓冲,否则容易3D失真. 下边是一个snippet,创建网格对象,并将其添加到当前layer:同时,将进行3D特 ...

  2. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  3. three.js 3d三维网页代码加密的实现方法

    http://www.jiamisoft.com/blog/17827-three-js-3dsanweiwangyejiami.html https://www.html5tricks.com/ta ...

  4. Three.js粒子特效，shader渲染初探（一篇非常详细的介绍）

    Three.js粒子特效,shader渲染初探 转载来源:https://juejin.im/post/5b0ace63f265da0db479270a 这大概是个序 关于Three.js,网上有不多 ...

  5. 腾讯QQ空间穿越时光轴3D特效

    <DOCTYPE html> <html> <head> <title>腾讯QQ空间穿越光轴3D特效</title> <style&g ...

  6. 10个超漂亮的CSS 3D特效

    10个超漂亮的CSS 3D特效 一.总结 一句话总结: 后面有空得好好练一练,也可以作为录课素材 二.10个超漂亮的CSS 3D特效 转自或参考:10个超漂亮的CSS 3D特效https://blog ...

  7. JS做深度学习3——数据结构

    最近在上海上班了,很久没有写博客了,闲下来继续关注和研究Tensorflow.js 关于深度学习的文章我也已经写了不少,部分早期作品可能包含了不少错误的认识,在后面的博文中会改进或重新审视. 今天聊聊 ...

  8. 所有用CSS3写的3D特效，都离不开这些知识

    起因 昨晚在做慕课网的十天精通CSS3课程,其中的综合练习是要做一个3D导航翻转的效果.非常高大上. 以往这些效果我都很不屑,觉得网上一大堆这些特效的代码,复制粘贴就好了,够快.但是现实工作中,其实自 ...

  9. js callee,caller学习

    原文地址:js callee,caller学习 /* * caller 返回一个对函数的引用,该函数调用了当前函数. * 如果函数是由顶层调用的,那么 caller包含的就是 null . * 如果在 ...

随机推荐

  1. [团队项目]sprint3 & 团队贡献分。

    希望各组认真准备,拿出最好的阵容最好的状态,展示一学期的学习与工作成果. 各组注意完成sprint3的博客,写上团队贡献分. 将演示PPT(如果有)和代码上传到github. 截止日期:2016.6. ...

  2. Android WebView如何加载assets下的html文件

    项目需求:将html文件以及所用到的图片都放在 assets/html/ 目录下.然后在页面上通过WebView来显示 直接付上代码: private void readHtmlFormAssets( ...

  3. 灰色预测模型 c# 算法实现

     public class GrayModel    {        private double a0, a1, a2;        private int size;        priva ...

  4. C#中通过Selenium IWebDriver实现人人网相册备份工具

    我用Selenium写了一个人人网相册备份工具,亲测通过. 需要输入你的用户名.密码.相册地址. 代码如下: using System; using System.Collections.Generi ...

  5. 【Java】Java创建String时，什么情况放进String Pool？

    对Java创建String是否放入String pool作代码性的试验. 参考的优秀文章 JAVA面试题解惑系列(二)——到底创建了几个String对象? public String(String o ...

  6. QT笔记之模态对话框及非模态对话框

    模态对话框(Modal Dialog)与非模态对话框(Modeless Dialog)的概念不是Qt所独有的,在各种不同的平台下都存在.又有叫法是称为模式对话框,无模式对话框等.所谓模态对话框就是在其 ...

  7. UESTC 1256 昊昊爱运动 Map

    昊昊爱运动 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) 昊昊喜欢运动 他N天 ...

  8. ASP.NET导入导出

    //创建一个数据链接 // string strCon =" Provider=Microsoft.Jet.OLEDB.4.0;Data Source={0} ;Extended Prope ...

  9. mongodb .net driver

    1.介绍 The official MongoDB .NET Driver provides asynchronous interaction with MongoDB. Powering the d ...

  10. I2C总线信号时序总结

    I2C总线信号时序总结 总线空闲状态  I2C总线总线的SDA和SCL两条信号线同时处于高电平时,规定为总线的空闲状态.此时各个器件的输出级场效应管均处在截止状态,即释放总线,由两条信号线各自的上拉电 ...