three.js
关注
分享
扫一扫
学习three.js
sheerhr
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
28.使用法向贴图创建更精细的凹凸和皱纹
通过设置normalMap属性设置为一个法向纹理，还可以指定凹凸的程度，方法是设置normalScale属性。<!DOCTYPE html><html><head> <title>Example 10.03 - Normal maps</title> <script type="text/javascript" src="../libs/three.js"></script> <.原创 2021-01-15 14:03:28 · 257 阅读 · 0 评论 -
27.使用bumpMap创建凹凸效果
<!DOCTYPE html><html><head> <title>Example 10.02 - Bump maps</title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src="../libs/stats.js"><原创 2021-01-15 13:29:07 · 334 阅读 · 0 评论 -
26.轨道控件
<!DOCTYPE html><html><head> <title>Example 09.08 - Orbit controls</title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src="../libs/stats.js">原创 2021-01-14 15:18:28 · 165 阅读 · 0 评论 -
25.第一人称控件
<!DOCTYPE html><html><head> <title>Example 09.07 - first person camera </title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src="../libs/OBJLoad原创 2021-01-14 15:12:54 · 182 阅读 · 0 评论 -
24.翻滚控件
<!DOCTYPE html><html><head> <title>Example 09.06 - Roll controls </title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src="../libs/OBJLoader.js"原创 2021-01-14 15:01:37 · 167 阅读 · 0 评论 -
23.飞行控件
<!DOCTYPE html><html><head> <title>Example 09.05 - Fly controls </title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src="../libs/OBJLoader.js"&原创 2021-01-14 14:58:57 · 239 阅读 · 0 评论 -
22.轨迹球控件
<!DOCTYPE html><html><head> <title>Example 09.04 - Trackball controls </title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src="../libs/OBJLoade原创 2021-01-14 14:55:28 · 229 阅读 · 0 评论 -
21.使用Tween.js做动画
<!DOCTYPE html><html><head> <title>Example 09.03 - Animation tween </title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src="../libs/PLYLoader.j原创 2021-01-14 13:53:10 · 323 阅读 · 0 评论 -
1.场景
跟场景相关的函数：Scene.add() : 在场景中添加物体。Scene.remove():从场景中移除物体。Scene.children():获取场景中所有子对象的列表。Scene.getChildByName():利用name属性，从场景中获取某个指定的物体。Scene.traverse()：我们可以将一个函数传递给traverse()函数，这个传递过来的函数将会在场景的每一个子对象上调用一次。<!DOCTYPE html><!-- 场景 --><html原创 2021-01-09 14:11:55 · 328 阅读 · 0 评论 -
2.在场景中添加雾化效果
通过fog属性可以为整个场景添加一种雾化效果。一个物体离得越远，就越模糊。three.js库里打开雾化效果很简单。只需要在定义完场景后加上如下一行代码即可：scene.fog = new THREE.Fog(0xffffff, 0.015, 100);其中0xffffff表示了雾化的颜色，0.015表示的是near属性的值，100表示的远处属性的值，通过这两个属性可以决定雾从什么地方开始，以及浓度加深的程度。...原创 2021-01-09 14:21:06 · 415 阅读 · 0 评论 -
3.使用材质覆盖属性
当使用这个属性的时候，那么所有添加到场景中的物体都会使用同样的材质。scene.overrideMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});原创 2021-01-09 14:26:19 · 256 阅读 · 0 评论 -
4.几何对象的属性和函数
什么是geometry变量：举例来说，一个方块：一个方块有八个角。每个角都可以定义为x,y,z坐标的一个组合。所以每个方块都是三维空间中的8个点。在three.js库中，这些点称为顶点。一个方块有6个侧面，每个角有一个顶点。在three.js库中，每个侧面称为面，当你使用three.js库提供的这些几何体时，你不必亲自定义这些顶点和面。对于一个方块来讲，你只要定义长宽高即可。three.js库会利用这些信息，在正确的位置创建一个拥有八个顶点的几何体，并用正确的面连接起来。尽管你可以使用thre原创 2021-01-09 15:28:39 · 198 阅读 · 1 评论 -
6.相机
透视相机距离相机越远的物体，会被渲染得越小正投影相机使用正投影相机的话，所有的物体渲染出来的尺寸都一样，对象和相机之间的距离不会影响渲染结果。THREE.PerspectiveCamera（）接收以下参数。fov视角：当视角越大时，中间的物体就会越小。aspect一般跟屏幕的长宽比是一致的，如果这个值过大，那么物体会被渲染得很宽，可以自己实验一下。near设置一个很小的值，如果很大，物体会看不全far设置一个较大的值，如果很小，那么物体会看不全，如果很大，那么又会影响渲染的效率，就原创 2021-01-10 11:42:23 · 179 阅读 · 0 评论 -
7.AmbientLight（环境光）-影响整个场景的光源
AmbientLight光源的颜色会影响整个场景。而且AmbientLight的光线没有特定的来源，而且这个光源也不会影响阴影的生成。不能将AmbientLight作为场景中的唯一光源。在使用其他光源（例如Spotlight和DirectionalLight）的同时使用AmbientLight，目的是弱化阴影或添加一些颜色。如下例所示，可以使用一个简单的用户界面来修改添加到场景中的环境光。<!DOCTYPE html><html><head> <t原创 2021-01-11 09:13:10 · 2710 阅读 · 0 评论 -
8.PointLight（点光源）-照射所有方向的光源
Three.js库中的PointLight是一种单点发光，照射所有方向的光源。夜空中的照明弹就是一个很好地点光源例子。下例可以试验一下点光源。<!DOCTYPE html><html><head> <title>Example 03.02 - point Light</title> <script type="text/javascript" src="../libs/three.js"></script原创 2021-01-11 09:21:41 · 1297 阅读 · 0 评论 -
9.SpotLight(聚光灯光源)-具有锥形效果的光源
SpotLight(聚光灯光源)大概会是你最常用到的光源。SpotLight光源有一种锥形效果。你可以对比一下手电筒或灯笼。以下是聚光灯光源的一些属性。以下是一个聚光灯光源的例子<!DOCTYPE html><html><head> <title>Example 03.03 - Spot Light</title> <script type="text/javascript" src="../libs/three原创 2021-01-11 09:39:18 · 1326 阅读 · 0 评论 -
10.DirectionalLight（方向光）—— 模拟远处类似太阳的光源
方向光光源和我们之前看过的聚光灯光源之间主要的差别是：方向光不像聚焦光那样离目标越远越暗淡。被方向光光源照亮的整个区域接收到的光强是一样的。原创 2021-01-11 10:06:24 · 1209 阅读 · 0 评论 -
11.半球光光源
使用这种光源可以创建出更加贴近自然的光照效果。如果不使用这种光源，要模拟室外光照，可以添加一个方向光光源来模拟太阳，或者再添加一个环境光光源，为场景提供基础色。但是这样看上去不怎么自然。当你在室外的时候，并不是所有的光照都来自上方，很多是来自空气的散射、地面的反射，以及其他物体的反射。Three.js库中的HemisphereLight（半球光光源）就是为这种情形创建的。它提供了一种简单的方法，用以获取比较自然的光照效果。下面是一个示例：<!DOCTYPE html><html&g原创 2021-01-11 10:26:09 · 509 阅读 · 0 评论 -
12.平面光光源
使用平面光光源，可以定义一个发光的矩形。下面是一个示例：<!DOCTYPE html><html><head> <title>Example 03.06 - Area Light</title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript"原创 2021-01-11 10:29:21 · 695 阅读 · 0 评论 -
13.镜头眩光
当你直接朝着太阳拍照时就会出现镜头炫光。大多数情况下需要避免这种情形，但是对于游戏和三维图片来说，它提供了一种很好的效果，让场景看上去更加真实。下图是镜头眩光的一些参数：下例是一个示例<!DOCTYPE html><html><head> <title>Example 03.07 - Lensflarest</title> <script type="text/javascript" src="../libs/t原创 2021-01-11 10:35:39 · 444 阅读 · 0 评论 -
14.three.js中的材质
材质的种类如上表所示。下表是材质的一些共有属性：对于每个材质还可以设置一些融合属性。高级属性原创 2021-01-11 10:56:25 · 123 阅读 · 0 评论 -
15.MeshBasicMaterial
是一种非常简单的材质，这种材质不考虑光照的影响。使用这种材质的网格会被渲染成一些简单的平面多边形，而且你也有机会显示几何体的线框。除了之前提到的那些公有属性之外，还可以设置下面这些属性：下面是一个示例<!DOCTYPE html><html><head> <title>Example 04.01 - MeshBasicMaterial</title> <script type="text/javascript"原创 2021-01-11 11:15:33 · 782 阅读 · 0 评论 -
16.基于深度着色的MeshDepthMaterial
使用这种材质的物体，其外观不是由光照或某个材质属性决定的，而是由物体到相机的距离决定的。可以将这种材质与其他材质相结合，从而很容易地创建出逐渐消失的效果。原创 2021-01-11 13:29:51 · 255 阅读 · 0 评论 -
17.粒子实现雪花效果
使用粒子可以很容易地创建出很多细小的物体，可以用来模拟雨滴和雪花。下表是粒子对象中所有可设置属性的说明：使用Three.PointCloudMaterial来管理大量的粒子，产生雪花效果。示例如下<!DOCTYPE html><html><head> <title>Example 07.03 - Particle Basic Material</title> <script type="text/javascrip原创 2021-01-12 14:53:46 · 534 阅读 · 0 评论 -
18.使用h5画布格式化粒子
Three.js提供了两种使用html5画布格式化粒子的方法。下面将会分别介绍。在CanvasRenderer中使用HTML5画布通过THREE.SpriteCanvasMaterial（），该材质是专门为CanvasRenderer创建的，而且只能用于这种渲染器。该材质可以设置的属性如下：下面是一个示例<!DOCTYPE html><html><head> <title>Example 07.04 - Particles - Can原创 2021-01-12 15:12:15 · 160 阅读 · 0 评论 -
19.使用纹理格式化粒子
在前面的例子中，我们看了如何使用HTML5的画布来格式化一个粒子系统。因为你可以画任何你想画的，甚至是加载外部的图片。但是还有一种更加直接的、使用图片格式化粒子的方法。在three.js中可以使用THREE.ImageUtils.loadTexture（）方法加载外部的图片。 下例是模拟雨滴的案例：<!DOCTYPE html><html><head> <title>Example 07.06 - Particles - Rainy s.原创 2021-01-12 15:54:05 · 157 阅读 · 0 评论 -
20.选择对象
这节探讨的是如何使用鼠标在场景中选择一个对象。<!DOCTYPE html><html><head> <title>Example 09.02 - Selecting objects</title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript原创 2021-01-13 17:30:38 · 182 阅读 · 0 评论