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. Haskell中cabal install glib遇到的问题

    1. 运行命令cabal install glib时出现错误: Cannot find gtk2hsC2hs Please install `gtk2hs-buildtools` first and ...

  2. PL/SQL集合（一）：记录类型（TYPE 类型名称 IS RECORD）

    记录类型 利用记录类型可以实现复合数据类型的定义: 记录类型允许嵌套: 可以直接利用记录类型更新数据. 传统操作的问题 对于Oracle数据类型,主要使用的是VARCHAR2.NUMBER.DATE等 ...

  3. the source attachment does not contain the source for the file xxx.class无法关联到某个类

    问题描述: 按下列操作添加相应路径(这里是错误操作) 该问题仍旧无法解决: 注意:这里spring-webmvc-4.1.7.RELEASE.JAR中确实包含AnntationMethodHandle ...

  4. iOS定位原理和使用建议（转）

    原文:http://ibbs.91.com/thread-1548870-1-1.html 看到很多网友讨论iOS设备定位的问题,这里将我们所了解的关于iPhone.iPad.iPod等的定位原理做详 ...

  5. JS&CSS压缩工具YUICompressor

    YUI Compressor 是一个用来压缩 JS 和 CSS 文件的工具,采用Java开发. YUI Compressor下载地址:http://www.jb51.net/softs/25860.h ...

  6. 12.GIT多人协作

    当你从远程仓库克隆时,实际上Git自动把本地的master分支和远程的master分支对应起来了,并且,远程仓库的默认名称是origin. 查看远程库的信息 $ git remote origin $ ...

  7. centos 文档的压缩和打包 gzip,bzip2,xz,zip,unzip,tar,tgz 第九节课

    centos  文档的压缩和打包   gzip,bzip2,xz,zip,unzip,tar,tgz  第九节课 SAS盘可以支持热插拔,看机器 tar.zip.tar -czvf 不会动源文件,gz ...

  8. loadrunner11的移动端性能测试之场景设计

    测试步骤之场景设计(Controller) 进入手工场景 准备好脚本后就可以进行场景设计和执行场景了,从VuGen中进入,见下图: 进入后第一个为目标场景,选择第二个更灵活的手工场景,我的目标人数20 ...

  9. sdut 迷之容器（线段树+离散化）

    #include <iostream> #include <algorithm> #include <string.h> #include <stdio.h& ...

  10. bootstrap fileinput api翻译笔记

    bootstrap fileinput HTML标签属性 data-show-preview="false" // 是否显示预览区 multiple // 多文件 data-sho ...