Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图形库。

简单点的说法：WebGL可以看成是浏览器给我们提供的接口，在javascript中可以直接用这些API进行3D图形的绘制；而Three.js就是在这些接口上又帮我们封装得更好用一些。

既然有了WebGL，我们为什么还需要Three.js？ 
这是因为WebGL门槛相对较高，需要相对较多的数学知识。虽然WebGL提供的是面向前端的API，但本质上WebGL跟前端开发完全是两个不同的方向，知识的重叠很少。相关性只是他们都在web平台上，都是用javascript而已。一个前端程序员或许还熟悉解析几何，但是还熟悉线性代数的应该寥寥无几了（比如求个逆转置矩阵试试？），更何况使用中强调矩阵运算中的物理意义，这在教学中也是比较缺失的。 
因此，前端工程师想要短时间上手WebGL还是挺有难度的。 
于是，Three.js对WebGL提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本。并且，几乎没有损失WebGL的灵活性。 
因此，从Three.js入手是值得推荐的，这可以让你在较短的学习后就能面对大部分需求场景。

下面是一个demo：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>多样式旋转体</title>

        <script src="http://gamingJS.com/Three.js"></script>

        <script src="http://gamingJS.com/ChromeFixes.js"></script>

    </head>

    <body>

        <script>

            window.onload=function(){

//            定义3个基本对象(场景（scene）, 相机（camera）, 以及一个渲染器（renderer）)

              var camera, scene, renderer;

              var geometry, material, mesh;

              init();

              animate();

              function init() {

                scene = new THREE.Scene();

                var aspect = window.innerWidth / window.innerHeight ;

                camera = new THREE.PerspectiveCamera(75, aspect, 1, 1000);

                /*

                     第一个属性75设置的是视角（field of view）;

                     第二个属性设置的是相机拍摄面的长宽比（aspect ratio）;

                     接下来的2个属性是近裁剪面（near clipping plane） 和 远裁剪面（far clipping plane）

                 * */

//                设置颜色和相机视角

                camera.position.z = 500;

                scene.add(camera);

            //                创建一个几何模型

                geometry = new THREE.TorusKnotGeometry(150, 50 ,100,100,1);

//                geometry = new THREE.CubeGeometry(150, 50 ,100,100,1);

//                geometry = new THREE.SphereGeometry(150, 50 ,100);

//                geometry = new THREE.TorusKnotGeometry(150, 50 ,100);

//                geometry = new THREE.TorusGeometry(150, 50 ,100);

//                geometry = new THREE.TorusGeometry(150, 50 ,100,100);

//                材料

                material = new THREE.MeshNormalMaterial({

                  color: 0xf32179,

                });

                // 网孔基础材料

//                material = new THREE.MeshBasicMaterial({

//                  color: 0xf32179,

//                });

//             网孔：mesh

                mesh = new THREE.Mesh(geometry, material);

                scene.add(mesh);

                renderer = new THREE.CanvasRenderer();

                renderer.setClearColorHex(0xffffff);

                renderer.setSize(window.innerWidth, window.innerHeight);

                document.body.style.margin = 0;

                document.body.style.overflow = 'hidden';

                document.body.appendChild(renderer.domElement);

              }

              function animate() {

                requestAnimationFrame(animate);

                mesh.rotation.x = Date.now() * 0.0001;

                mesh.rotation.y = Date.now() * 0.001;

                mesh.rotation.z = Date.now() * 0.001;

                renderer.render(scene, camera);

              }

            }

        </script>

    </body>

</html>

【Demo】Tree.js实例的更多相关文章

  1. Vue.js实例练习

    最近学习Vue.js感觉跟不上节奏了,Vue.js用起来很方便. 主要实现功能,能添加书的内容和删除.(用的Bootstrap的样式)demo链接 标题用了自定义组件,代码如下: components ...

  2. JS实例

    JS实例 1.跑马灯 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  4. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  5. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...

  6. 【js实例】Array类型的9个数组方法,Date类型的41个日期方法,Function类型

    前文提要:[js实例]js中的5种基本数据类型和9种操作符 Array类型的9个数组方法 Array中有9个数组方法: 1.检测数组 2.转换方法 3.栈方法 4.队列方法 5.冲排序方法6.操作方法 ...

  7. [百度地图] 用于类似 DWZ UI 框架的 百度地图 功能封装类 [MultiZMap.js] 实例源码

    MultiZMap 功能说明 MultiZMap.js 本类方法功能大多使用 prototype 原型 实现,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个 多标签的 UI 的框架: 包含的 ...

  8. 模拟jQuery中的ready方法及实现按需加载css,js实例代码

    这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下     一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...

  9. 一个demo学会js

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...

随机推荐

  1. Feature Toggle JUnit

    Feature Toggle,简单来说,就是一个开关,将未完成功能的代码屏蔽后发布到生产环境,从而避免多分支的情况.之所以有本文的产生,就是源于此情景.在引入Feature Toggle的同时,我们发 ...

  2. Oracle Schema Objects——Index

    索引主要的作用是查询优化. Oracle Schema Objects 查看执行计划的权限:查看执行计划plustrace:set autotrace trace exp stat(SP2-0618. ...

  3. Asm 常用资源

    masm:http://www.aogosoft.com/masm:http://www.asmirvine.comasm:http://asm.yeah.netwin32asm:http://win ...

  4. flight framework 核心解读

    http://blog.csdn.net/sky_zhe/article/details/38906689?utm_source=tuicool&utm_medium=referral

  5. MySQL Bugs: #34354: Feature request: EXPLAIN ALTER TABLE https://bugs.mysql.com/bug.php?id=34354

    MySQL Bugs: #34354: Feature request: EXPLAIN ALTER TABLE https://bugs.mysql.com/bug.php?id=34354 [SQ ...

  6. Benefits of Using the Spring Framework Dependency Injection 依赖注入 控制反转

    小结: 1. Dependency Injection is merely one concrete example of Inversion of Control. 依赖注入是仅仅是控制反转的一个具 ...

  7. AJAX.basic

    之前在项目中使用ajax都是通过jQuery的Ajax API来进行的,今天试了一下通过基本的JavaScript来进行ajax请求,将代码记录下来: jsp 页面 <%@ page pageE ...

  8. Python高级编程技巧（转）

    译文:http://blog.jobbole.com/61171/ 本文展示一些高级的Python设计结构和它们的使用方法.在日常工作中,你可以根据需要选择合适的数据结构,例如对快速查找性的要求.对数 ...

  9. 通过 微软 pai-fs 上传数据到HDFS （Microsoft OpenPAI）

    准备环境 (个人使用记录,方便下次使用查阅~~) 首先保证PAI是登陆状态: 进入GitHub项目所在地址: https://github.com/Microsoft/pai/ 然后切换分支到  具体 ...

  10. Day07 jdk5.0新特性&Junit&反射

    day07总结 今日内容 MyEclipse安装与使用 JUnit使用 泛型 1.5新特性 自动装箱拆箱 增强for 静态导入 可变参数方法 枚举 反射 MyEclipse安装与使用(yes) 安装M ...