hbuilderx简单⽹页代码_「three.js基础」⼊门如此简单，⾛
起！带你飞！
点击上⽅关注我呦！
跟程序员⽼油条⼀起学前端！
说起WebGl，想必有⼀半的前端⼩⽩们没有听说过这个东东，也很正常，随着前端技术的不断加速更新，新技术长时间不去学习，那么注定会被淘汰的。
我第⼀次接触WebGL，就感觉⽐CSS3⾼级多了，以为CSS3的 2D/3D转化效果就已经很⽜逼了，但往往最⽜逼的东西你根本就不知道。
经常做⽹站，会发现国外的⽹站特效就很炫，真的，⼀点也不吹，看看国内的企业官⽹，再看看国外的企业官⽹，⼼理往往会产⽣⼀种惊喜和担忧，惊喜他们的普通⽹站为啥做的就那么炫，再看看我们的，普通的不⾏，担忧⾃⼰能不能写出这么炫的页⾯。
使⽤WebGL原⽣的API来写3D程序是⼀件⾮常痛苦的事情，就像⽤原⽣js写程序⼀样，但总会有很多专业，不怕⾟苦，为我们服务的⼈来写框架，减轻后⾯的⼈的压⼒，于是乎jquery出来了，three.js也出来了，它掩盖了很多⿇烦的细节。接下来，就⼀起看看吧。
什么是Three.js？
名字很好理解，Three？三维空间：3D，这样理解就⾏，three表3D的意思，js就是JavaScript，连起来就是使⽤js来写3D程序，同样的和JavaScript也是运⾏在浏览器上的。浏览器也⽀持3D程序，它以简单的、直观的⽅式封装了3D图形编程中常⽤的对象，内置了很多对象和极易上⼿的⼯具，功能相当强⼤，确实⽐CSS3更，另外它是开源的，你在GitHub上就能到。
Three.js⽰例
我们先来看看两个⽤Three.js做的3D动画吧。
⽰例1
⽰例2
Three.js简要说明
在WebGl相当出⾊的⼀款框架，是⼀位外国哥们开发的，⽹名：Mr.doob，框架易⽤性和扩展性极⾼，能够满⾜⼤部分开发者的需求，另外⼀些功能需⼆次开发，如：游戏开发，下⾯说说⼀些简要的功能：
优点：
1、⾯向对象：Three.js也满⾜⾯向对象，不单单是调⽤了js函数，也可以直接使⽤上层的JavaScript对象。
2、包含数学库：学过数学与计算机科学的⼈知道，⾥⾯有很多抽象的编程，⽐如：MATLAB，密码学等，数学不能太差，⾥⾯有很计算的，Three.js⾥有很矩阵运算、投影和⽮量运算。
3、⽀持Canvas：CSS3的Canvas也是神⼀样的级别，难搞的很，它也⽀持使⽤Canvas2D、Canvas3D和Svg进⾏渲染，因为Three.js 兼容性不是很好，有时候还得⽤他们来解决未兼容的问题。说到这，我说说能兼容的浏览器：
主要有：Google Chrome 9+、Firefox 4+、Opera 15+、Safari 5.1+、Internet Explorer 11 和 Microsoft Edge。更低的版本可能要寻求其他的⽅法了，⽐如⽤CAnvas和SVG。
4、扩展性强：你可以按⾃⼰的需求来⾃定义优化或者添加新的特性，亦或者需要某个特殊的数据结构，那么你只需要封装到Three.就是即可。
缺点：
没有学习资料，有也是英⽂，上⽹上搜查了以后也是不全的，不适合新⼿搞，不过现在有了WebGL中⽂⽹，还好啦，也不是很全乎，再加上我详细讲解，新⼿学会运⽤它绝不是问题。兼容性不太好，但是能兼容⽬前的主流的浏览器。
⾛起来，动起来，hello world！
这⾏业学啥语⾔都是从hello World开始的，当然我们就得例外⼀下，哈哈哈，整起来！
1、下载
2、⽬录及配置说明
学习之前⼜不要了解⽬录，如下图所⽰：
.github：在GitHub上的⼀些说明，如贡献，发⾏的版本等
build：⾥⾯是Three.js的⽂件，压缩和没压缩的引⽤⽂件
docs：这⾥是three.js的帮助⽂档，⾥⾯是各个函数的api，可惜并没有详细的解释。这也是最烦的，靠这个学习根本整不起来。
editor：⼀个类似3D-max的简单编辑程序，它能创建⼀些三维物体。
examples：⼀些很有趣的例⼦demo，也没有说明，看代码蒙蔽，看效果⽜逼。
src：源代码⽬录，⾥⾯是所有源代码。
files：⼀些例⼦的图⽚和字体
test：⼀些测试代码，没多⼤⽤
utils：⼀些脚本，python⽂件的⼯具⽬录。例如将3D-Max格式的模型转换为three.js特有的json模型。
.editorConfig：帮助开发⼈员在不同的编辑器和IDE之间定义和维护⼀致的编码样式
.gitattribute 指定⾮⽂本⽂件的对⽐合并⽅式
.gitigonre：⽤于忽略你不想提交到Git上的⽂件
.npmignore 来忽略你在发布包时不想发布的⽂件
如何做网页l 是⼀种可持续集成(CI)⼯具，代码提交后⾃动构建，与github集成的很好
LICENSE：版权信息
package.json：主要⽤来定义项⽬中需要依赖的包
package-lock.json：⽤以记录当前状态下实际安装的各个npm
README.md：介绍three.js的⼀个⽂件，⾥⾯还包含了各个版本的更新内容列表。
终于介绍完了，太多了，如果还有，我想我还会⼀⼀介绍的，哈哈，接下来看看配置开发环境吧。
其实说这么多，就是想让你了解⼀下Three.js，开发的时候，我们根本就不⽤这些，就直接在html⽂档中引⼊three.js⽂件就⾏，然后开始编写程序，
这⾥我⽤的是HbuilderX，Chrome浏览器，建议⼤家使⽤WebStorm更好。
看看我根据⽹上敲的第⼀个案例吧。
效果如下：
就这样，第⼀个Three.js的案例完美运⾏起来了，确实⾥⾯有太多的函数写的时候需要去查，之后的内容我们会分析如何去实现这个效果的，three.js说⼤不⼤，说⼩不⼩，但掌握还是需要⼀段时间的。⼀⼀学习那些构造函数⼯作量也特别⼤，我们就通过案例去分析，去掌握例如场景、⼏何体、材质、光照、相机、粒⼦等等知识点。
就写个这个，我就感觉写了很长时间，希望⼤家喜欢，能学到知识，
需要更多全套资料.视频.教程！
关注！转发！私信回复《资料》！
即可免费领取！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论