Three.js的使用及绘制基础3D图形详解
作者：岂安科技
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了Three.js的使用及绘制基础3D图形的相关资料，文中介绍的非常详细，对大家学习或者使用three.js具有一定的参考价值，需要的朋友们下面来一起看看吧。
Three.js 是一款 webGL（3D绘图标准，在此不赘述）引擎，可以运行于所有支持 webGL 的浏览器。Three.js 封装了 webGL 底层的 API ，为我们提供了高级的开发接口，可以使用简单的代码去实现 3D 渲染。（官网：）
二、 为什么要选择Three.js？
Three.js 作为原生 web3D 引擎，对插件式 web3D 引擎的优势不言而喻：不需要安装插件、在移动端支持好。
Three.js 与其他原生 web3D 引擎对比：
Babylon.js：一个强大的 3D 游戏引擎，由 Microsoft 的员工 David Cathue 主导开发。和 Three.js 相比，three.js 更倾向于动画，而 Babylon.js 则更适合游戏开发。
PhiloGL：增加了额外的功能帮助你可以使用本地的 WebGL ，这个 WebGL 的接口不是百分之百的被封装好了的，这使得 PhiloGL 上手难度较高。
SceneJS：一个开源的 JavaScript 3D 引擎，特别适合需要高精度细节的模型需求，比如工程学和医学上常用的高精度模型。
CopperLicht：一个“商业级别的 WebGL 3D 引擎和编辑器”，你可以免费使用，但是要想获得未压缩的完整版带支持文档的源码和其他服务，则需要购买授权。
相对这些 web3D 引擎，Three.js 的还有以下几点优势：
开发和维护比较活跃；
文档齐全，案例丰富，易于学习；
设计灵活、方便拓展以及增加新的特性；
我们可以根据自己的需要去选择web3D引擎。
三、 开始Three.js
在开始我们的第一个 3D 程序之前，我们需要了解 Three.js 的一些基础，以下是 Three.js 制作 3D 的五要素：
1、渲染器（render）
我们可以把渲染器想想成为一个画布，我们需要在这个画布上去画出我们需要展示的东西。
2、场景（scene）
相当于一个空间，我们需要将展示的东西放在这个空间里，然后再在画布上绘制出来。
3、照相机（camera）
相当于眼睛，我们想要看到物体，就需要眼睛去看。
4、光源（light）
物体需要光照才能看见，不然就是漆黑一片（但是在某些情况下展示物体不需要光源）。
5、物体（object）
我们想要表现的内容，会有形状和材质属性。
了解了五要素之后，就可以开始写我们的代码了。
2、 创建渲染器
首先，我们创建一个渲染器。创建渲染器有两种方式：
a. 在 html 上写出 canvas 元素
&canvas id="mainCanvas" width="600px" height="450px" &&/canvas&
然后创建渲染器时绑定此元素
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas')
renderer.setClearColor(“#000”); // 设置渲染器背景为黑色
b. html 上不创建 canvas 元素，而是使用普通的元素作为容器
&div id="mainCanvas" style="width:600height:450" &&/div&
然后创建渲染器，放入容器中
var canvasContainer = document.getElementById('mainCanvas');
var width = canvasContainer.clientW //获取画布的宽
var height = canvasContainer.clientH //获取画布的高
var renderer = new THREE.WebGLRenderer({
antialias: true //抗锯齿开
renderer.setSize(width, height); //设置渲染器的宽和高
renderer.setClearColor(0x000000); //设置渲染器的背景颜色为黑色
var canvas = renderer.domE //获取渲染器的画布元素
canvasContainer.appendChild(canvas); //将画布写入html元素中
这样，我们的渲染器就创建成功了。创建渲染器时，还可以设置多个属性，比如抗锯齿、透明度等等，详见 three.js 官方文档。
3、 创建场景
渲染器创建之后，我们再创建场景，准备将我们需要绘制的东西放入场景。
var scene = new THREE.Scene();
4、 创建照相机
照相机常用的有两种，一种叫正投影相机：
THREE.OrthographicCamera( left, right, top, bottom, near, far )；
下图为该照相机的视野：
一种叫做透视照相机：
THREE.PerspectiveCamera( fov, aspect, near, far ) ;
下图为该照相机的视野：
下图为两个照相机展示效果的对比：
**左边为正投照相机，远近大小都一样；右边为透视照相机，远小近大，更接近于人眼观察物体的感觉。**
在此以正投照相举例：
var camera = new THREE.OrthographicCamera(-6, 6, 4.5, -4.5, 0, 50); //创建照相机
camera.position.set(35, 15, 25); //设置照相机的位置
camera.lookAt(new THREE.Vector3(0, 0, 0)); //设置照相机面向(0,0,0)坐标观察
照相机默认坐标为(0,0,0);
默认面向为沿z轴向里观察;
5、 创建光源
常用光源有：
1、平行光(DirectionalLight)，效果类似太阳光
DirectionalLight ( color, intensity )
color — 光源颜色的RBG数值。
intensity — 光强的数值。
2、点光源(PointLight)，效果类似灯泡
PointLight ( color, intensity, distance, decay )
color — 光源颜色的RBG数值。
intensity — 光强的数值。
distance -- 光强为0处到光源的距离，0表示无穷大。
decay -- 沿着光照距离的衰退量。
3、聚光光源(SpotLight)，效果类似聚光灯
SpotLight ( color, intensity, distance, angle, penumbra, decay )
color — 光源颜色的RBG数值。
intensity — 光强的数值。
distance -- 光强为0处到光源的距离，0表示无穷大。
angle -- 光线散射角度，最大为Math.PI/2。
penumbra -- 聚光锥的半影衰减百分比。在0和1之间的值。默认为0。
decay -- 沿着光照距离的衰退量。
在此以点光源举例：
var light = new THREE.PointLight(0xffffff, 1, 100); //创建光源
light.position.set(12, 15, 10); //设置光源的位置
scene.add(light); //在场景中添加光源
6、 创建物体
制作物体的方法是 Mesh：
new THREE.Mesh(Geometry, Material);
Geometry 为物体的形状，Material 为物体的材质；
1、形状(Geometry)
three.js 给出了很多方法去生成固定的形状，比如长方体(BoxGeometry)、球体(SphereGeometry)、圆形(CircleGeometry)等等。还有根据坐标去生成具体形状的方法，可以借助第三方建模软件建模之后引入，转换为坐标后再生成，就可以做比较复杂的形状了，比如人脸、汽车等等。
在此以长方体为例生成形状：
//设置正方体宽度，高度，深度分别为5,5,5
var geometry = new THREE.BoxGeometry (5, 5, 5);
2、材质(Material)
材质就像是物体的皮肤，决定物体外表的样子，例如物体的颜色，看起来是否光滑，是否有贴图等等。
常用材质有：
·网格基础材质(MeshBasicMaterial)
该材质不受光照的影响，不需要光源即可显示出来，设置颜色后，各个面都是同一个颜色。
·网格法向材质(MeshNormalMaterial)
该材质不受光照的影响，不需要光源即可显示出来，并且每个方向的面的颜色都不同，同但一个方向的面颜色是相同的，
该材质一般用于调试。
·网格朗博材质(MeshLambertMaterial)
该材质会受到光照的影响，没有光源时不会显示出来，用于创建表面暗淡，不光亮的物体。
·网格 Phong 材质(MeshPhongMaterial)
该材质会受到光照的影响，没有光源时不会显示出来，用于创建光亮的物体。
在此以网格 Phong 材质为例创建材质：
var material = new THREE.MeshPhongMaterial({
color: "yellow" //设置颜色为yellow
创建形状和材质之后，就可以创建该物体了：
//创建物体
var cube = new THREE.Mesh(geometry, material);
7、 渲染画布
通过以上步骤，我们已经有了渲染器(renderer)、场景(scene)、照相机(camera)、光源(light)和物体(cube)，此时我们需要将光源和物体加入场景中：
scene.add(light);
scene.add(cube);
然后再使用渲染器将场景和照相机渲染出来：
renderer.render(scene, camera);
效果如下图：
四、 结束语
在以上内容中，只写到了 Three.js 中提供的基础功能，还有很多高级的功能需要大家去探索。希望大家看完这篇文章后能对 Three.js 有一个初步的了解，并能够使用 Three.js 绘制出基础的 3D 图形。
大家可以去 Three.js 官网的 examples 中看看，这里面都是一些很优秀和典型的 examples，并且还有代码可以下载，大家可以去研究探索一番。
在此附上几个精彩的例子供大家欣赏：
以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具听 说 网 上 能 玩 福 彩 3D 怎 么 玩 ！！！ 朋友说说？_百度知道
听 说 网 上 能 玩 福 彩 3D 怎 么 玩 ！！！ 朋友说说？
今年3月1号起，肯定会有风险的，所有网络购彩全面停了。现在在运营的都是私彩。你自己把握吧望采纳
采纳率：70%
来自团队：
求答案？在BET _ 365这里不错的,楼主还是去看一下吧。保证比别处好玩。 记得采纳啊
为您推荐：
其他类似问题
别克凯越的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。> 没有基础能学3D网络游戏开发吗？
可以的，学习3D网络游戏开发一定要选择正规专业的游戏开发学校，愿你学有所成。
其它回答 能 &不过得找专业的老师或学习
其它回答 可以，去汇众学习零基础的课程就行，上课认真听讲，老师讲的也很细致，学会不难。
发表我的评论当前位置：版块 >
3D打印键帽基础教程
先说一下，只是基础教程，比较乱，但是照做肯定能做出自己的。相关软件和模型请自己去找。需要软件：CATIA,meshmixer，meshlab还有个后文会提到。需要模型：1.樱桃键帽模型，这个可以上天下找。用catia转成STL格式待用。2.想要安上去的模型，这个从网上找，最好找STL格式的。3DMAX/MAYA格式后文提及。我拿下面这个举例：可爱的章鱼。用meshmixer打开。
图片1.jpg (90.94 KB, 下载次数: 8)
3D打印键帽基础教程
11:54 上传
3.加载键帽STL
图片2.jpg (54.17 KB, 下载次数: 9)
3D打印键帽基础教程
11:54 上传
4.调整章鱼大小位置使两部分重叠
图片3.jpg (26.84 KB, 下载次数: 8)
3D打印键帽基础教程
11:54 上传
5.将两部分合并为一个整体部件
图片4.jpg (32.81 KB, 下载次数: 8)
3D打印键帽基础教程
11:54 上传
6.导出STL。7.Netfabb检查是否错误，没错误即可打印，有错误部分是打印不出来的。
图片5.jpg (105.88 KB, 下载次数: 8)
3D打印键帽基础教程
11:54 上传
8.可以打印啦(这个章鱼还在制作中，先放个别的成品看看）
图片6.jpg (170.47 KB, 下载次数: 8)
3D打印键帽基础教程
11:54 上传
附：还可以做镂空、加英文、加数字神马的打印机精度差做的不好看就不要怪我啦·关于错误这个给你们看看是什么情况：
图片7.jpg (82.64 KB, 下载次数: 8)
3D打印键帽基础教程
11:54 上传
红色部分打印不出来，效果大概是这样的
图片8.jpg (91.86 KB, 下载次数: 8)
3D打印键帽基础教程
11:54 上传
图片9.jpg (55.93 KB, 下载次数: 8)
3D打印键帽基础教程
11:54 上传
打印效果图
图片10.jpg (96.95 KB, 下载次数: 8)
3D打印键帽基础教程
11:54 上传
至于怎么处理，主要是所需软件很贵，告诉也是坑你们 哈哈。
为什么我第一眼看上去是暴走漫画
好给力的说
主要是手机渣像素，我这个钢铁侠还是漂亮的
果然 机子精度低了玩不动
那个是钢铁侠么
这个技术离消费级还很远。
万元以内的桌面式3D打印，主要材料是ABS或PLA，精度用在键帽上根本就无法用，而且表面粗糙度也差，你打出来都不好意思给人看，更别说用了。
那到最便宜几万元的光敏树脂3D打印机又如何？第一这个材料和工时上就有点耗不起了，第二就是这种材料加工出来的东西物理性能（强度）差，一般用于二次倒模或打样。
工业尼龙SLS或者金属粉末3D打印，除非是土豪，否则谁玩得起。
所以楼主只是自己想当然而已，说实话，高精度CNC来加工键帽还靠谱一点。
[]: mekchen，别以为脱了马甲我就不扣你 5 元 发烧值.
看来楼上是专业的
[]: 小叮当YoyO在A股市场中遭遇了股灾，血本无归，别跳楼，奖励4 元 发烧值安慰一下。
Powered by