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. android的一些类库的优缺点

    经过本人的面试经验,以及接触的android项目,总结了一下android的一些类库的优缺点: 一,线程方面 1.AsyncTask 首先是线程优化以及缺陷方面,针对目前大多数类库来说,都有好的设计方 ...

  2. ubuntu打开txt乱码

    因为不支持中文 输入命令: iconv -f gbk -t utf8 filename.txt > filename.txt.utf8

  3. python re.sub 括号匹配替换匹配到的内容后接数字

    如果代码为: text = re.sub(r'(?<=[{])([a-z]+)6(?=[}])', r'\13', text) 上面代码会报错,因为没有组合13,所以不能获得组合13的内容. 但 ...

  4. tobii SDK开发学习

    最近实验室用到tobii的眼动仪,从网上了解了下,tobii是瑞典的眼跟踪技术开发商,今年似乎有上市计划,不知道市值多少 买了仪器后试用了下,还算可以,将来配合人体设备开发,不过配套软件还需要花钱买. ...

  5. grep命令做永久别名 显示颜色

    grep命令做永久别名  显示颜色 http://jingyan.baidu.com/article/22fe7ced17c1543002617f9c.htmlhttp://blog.csdn.net ...

  6. Java Thread 如何处理未捕获的异常？

    Java Thread是不允许异常抛出到本线程之外的,Runnable接口的public abstract void run()是不允许throws Exception的,这在编译时就通不过. 线程异 ...

  7. [Err]1418 This function has none of DETERMINISTIC,NO SQL,or R

    -----------------------------------------------------------------------------------------------      ...

  8. [py][lc]python高阶函数(匿名/map/reduce/sorted)

    匿名函数 - 传入列表 f = lambda x: x[2] print(f([1, 2, 3])) # x = [1,2,3] map使用 传入函数体 def f(x): return x*x r ...

  9. 20165324_mybash

    20165324_mybash 实验要求 实验要求: 使用fork,exec,wait实现mybash 写出伪代码,产品代码和测试代码 发表知识理解,实现过程和问题解决的博客(包含代码托管链接) 背景 ...

  10. Know that more adidas NMD Singapore colorways are coming

    The adidas NMD Singapore continues to be the right silhouette for summer time because of a mix of a ...