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. PHP获取目录和的方法通过魔术变量；通过超级全局变量；通过相关函数等等：

    <?php /** * PHP获取路径或目录实现 * @link http://www.phpddt.com */ //魔术变量,获取当前文件的绝对路径 echo "__FILE__: ...

  2. 详解spring boot mybatis全注解化

    本文重点介绍spring boot mybatis 注解化的实例代码 1.pom.xml //引入mybatis <dependency> <groupId>org.mybat ...

  3. Android USER 版本与ENG 版本的差异

    Android USER 版本与ENG 版本的差异 [Keyword] USER ENG user eng 用户版本 工程版本 差异 [Solution] Google 官方描述: USER/USER ...

  4. Hive与ES整合

    https://www.elastic.co/guide/en/elasticsearch/hadoop/current/hive.html 注:添加的第三方jar必须位于namenode下,否则依然 ...

  5. Python性能鸡汤(转)

    英文原文:http://blog.monitis.com/index.php/2012/02/13/python-performance-tips-part-1/ 英文原文:http://blog.m ...

  6. 第1章 1.2计算机网络概述--Intenet和广域网

    1.ISP Internet服务提供商,也称ISP运营商.如:在中国,电信.网通.长城宽带. ISP运营商内部的网络连接十分发达,但是不同ISP运营商之间的连接的线路非常有限,这就导致了跨运营商访问网 ...

  7. IOS 自己定义UITableView

    依据不同须要,须要使用tableview的结构,可是里面每个cell,又须要自己的样式.所以学习了一下如何把自定义的cell加到tableview里面 首先要自己创建一个类,继承UITableView ...

  8. python之celery队列模块

    一.celery队列简介 Celery 是一个 基于python开发的分布式异步消息任务队列,通过它可以轻松的实现任务的异步处理, 如果你的业务场景中需要用到异步任务,就可以考虑使用celery. 1 ...

  9. phpstorm psr2样式.xml

    将如下内容保存为 .xml 格式 <code_scheme name="Default"> <PHPCodeStyleSettings> <optio ...

  10. 高性能Web服务器Nginx

    高性能Web服务器Nginx介绍 Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.其特点是占有内存少,并发能力强 ...