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. HDU_1457_后缀自动机四·重复旋律7

    #1457 : 后缀自动机四·重复旋律7 时间限制:15000ms 单点时限:3000ms 内存限制:512MB 描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一段音乐旋律可以被表示为一段数构成 ...

  2. Oracle HA 之 OGG部署流水

    1.GG组件及其功能简介:    manager进程:总管其他所以进程及处理相应GGSCI命令.    capture进程:从源端的联机日志文件或归档日志文件抓取commit的信息.    sourc ...

  3. Python开发【Django】：路由规则

    Django路由规则 1.基于正则的URL 在templates目录下创建index.html.detail.html文件 <!DOCTYPE html> <html lang=&q ...

  4. python 面向对象 公有属性 用在哪里

    公有属性也可以叫做静态字段 如果每个对象都有一个共同的值 , 应该把它设置为公有属性 公有属性使用场景,每个对象中保存相同的东西时,可以使用公有属性 类找公有属性 过程

  5. 怎么应对 domino文档损坏然后损坏文档别删除导致数据丢失

    对于domino 有个机制是同步 ..然后如果文档被损坏之后会通过同步或者压缩 之类的 然后将损坏文档删除 那么这样就有个风险..知识管理文档会被删除. 并且删除了之后管理员如果不仔细看日志的话也不会 ...

  6. MySQL新加用户和开启慢查询

    mysql>grant select on *.* to read@'%' identified by 'j';  //给予read用户只读全部库的权限 mysql>grant selec ...

  7. 双舵轮AGV里程计、运动控制核心算法

    舵轮AGV可以通过调整两个舵轮的角度及速度,可以使小车在不转动车头的情况下实现变道,转向等动作,甚至可以实现沿任意点为半径的转弯运动,有很强的灵活性. 因此在AGV行业,这种驱动方式应用很广,但是目前 ...

  8. jdk eclipse SDK下载安装及配置教程

    原文地址https://blog.csdn.net/dr_neo/article/details/49870587 最新鲜最详细的Android SDK下载安装及配置教程 最近Neo突发神经,想要将学 ...

  9. 菜单条 Menu Bar Action

    //.h /***Action**/ QAction * act_openImage; QAction * act_openVideo; QAction * act_openAudio; /***Me ...

  10. VS2010/MFC编程入门之二十九（常用控件：列表视图控件List Control 下）

    上一节是关于列表视图控件List Control的上半部分,简单介绍了列表视图控件,其通知消息的处理和有关结构体的定义.本节继续讲解下半部分,包括列表视图控件的创建.CListCtrl类的主要成员函数 ...