Three.js笔记
关注
分享
扫一扫
文章平均质量分 75
暮志未晚NAN
这个作者很懒，什么都没留下…
展开
-
116 Three.js实现地形扫描效果
以上是当前效果，实现逻辑后面补上。原创 2020-09-01 23:18:31 · 3570 阅读 · 0 评论 -
115 Three.js实现地形显示隐藏过渡效果
这个就是此逻辑的效果，实现后面补上。原创 2020-09-01 23:15:43 · 1656 阅读 · 0 评论 -
114 Three.js实现深度遮挡的下雨特效
以上为当前效果的动图。原创 2020-09-01 23:11:53 · 3715 阅读 · 1 评论 -
113 Three.js的obb （OrientedboundingBox）方向包围盒的使用
一、包围盒简介：包围盒是一个简单的几何空间，里面包含着复杂形状的物体。为物体添加包围体的目的是快速的进行碰撞检测或者进行精确的碰撞检测之前进行过滤（即当包围体碰撞，才进行精确碰撞检测和处理）。包围体类型包括球体、轴对齐包围盒（AABB）、有向包围盒（OBB）、8-DOP以及凸壳。包围盒广泛地应用于碰撞检测，比如射击、点击、相撞等，每一个物体都有自己的包围盒。因为包围盒一般为规则物体，因此用它来代替物体本身进行计算，会比直接用物体本身更加高效和简单。目前广泛应用的是AABB和OBB包围盒，其中AA原创 2020-08-28 15:18:11 · 6716 阅读 · 4 评论 -
112 Three.js postProcess 后处理内置shader包
threejs的后期处理通道包提供了各种强大的效果，有了这些效果会大大降低代码难度，可以直接使用内置的着色器包，避免了复杂的着色器代码编写。效果示例：实现方式：初始化效果组合器composer=new THREE.EffectComposer(renderer); //该参数是WebGLRenderer对象为了保证组合器的正常使用，必要的引用包，在工程文件下可找到，这四个都是必须的，并且注意引用的顺序，如果顺序不对，浏览器控制台会报错的 <script src="js/pos转载 2020-07-30 17:28:01 · 1750 阅读 · 1 评论 -
111 three.js下雨进阶版，面只旋转y轴朝向相机
之前实现过，是利用的sprite永久朝向相机的特性实现的效果。但是这种效果对于雪还比较好，如果贴图修改成长条形的雨的话，从上往下看，就会有一种说不出的感觉，不真实。而我也通过修改shader和自己拼接渲染数据，实现了一个比较简单的渲染效果。接下来讲解一下实现逻辑：第一步，创建一个包围盒，来设置范围 const box = new THREE.Box3( new THREE.Vector3(-2000, -2000, -2000), new THREE.Vect原创 2020-07-22 17:25:26 · 2098 阅读 · 3 评论 -
1 重新启程，WebGL框架three.js
查看一个简单的案例：http://www.wjceo.com/blog/threejs/2018-02-07/3.html从今天开始，我学习WebGL基础将占时告一段落，开始学习WebGL的流行框架three.js。经验告诉我，学习一种语言，如果入门能力差，最好从框架开始学，虽然会被掩盖很多的原理方面的东西，但是，你能直接做出来一些东西，给自己充足的信心，能让自己做下去。如果你连东西都做不出来，时...原创 2017-07-03 11:24:08 · 4215 阅读 · 2 评论 -
2 Three.js的hello world
首先使用我们先用three.js创建一个立方体的hello world类型的案例。案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-09/4.html<!doctype html><html><head> <meta charset="UTF-8"> <meta name="v...原创 2017-07-03 14:29:24 · 3674 阅读 · 1 评论 -
3 Three.js绘制线
案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-09/5.html上面就是绘制完成后显示的效果。<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="wid原创 2017-07-03 16:04:49 · 6309 阅读 · 3 评论 -
4 Three.js一个案例详解
之前根绝官网书写了两个简单的案例，今天开始写了一个教程书里面的案例。案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-09/6.html（1）创建了渲染器，并传值对象antialias设置为true，告诉Three.js要启用抗锯齿（antialiased）渲染。抗锯齿可以避免绘制物体边缘时产生的锯齿。（2）创建场景。（3）创建相机，设置相机的投影视...原创 2017-07-04 12:02:10 · 7252 阅读 · 4 评论 -
5 Three.js一个好的结构书写
案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-09/7.html学习three.js也有两天了，现在也在不间断的学习相关知识，了解three.js的规则。也做了两个简单的案例，感受到了three.js的强大，研究了一些别人的代码，现在想找到一种适合自己的书写代码。今天，还真的找到了一种感觉特别适合自己的方法，自己写js的时候貌似也这么写。...原创 2017-07-04 18:16:42 · 3149 阅读 · 4 评论 -
6 Three.js工程文件目录结构
为了熟悉Three.js，我们需要花一些时间来了解它的目录结构、文档和示例。这里面包含的东西很多，了解一下对以后学习的用处很大。~build/Three.js的完整项目代码输出目录，包括未压缩版本和压缩版本。Three.js使用Google Closure进行编译发布，编译好的输出文件包含完整的Three.js库代码，它由不同代码目录下的源代码编译而成。如果你不熟悉Closure并原创 2017-07-05 10:36:00 · 3735 阅读 · 0 评论 -
7 Three.js内置几何
这个案例是官方案例，个人通过一个一个测试备注，感受模型如何配置参数，来生成理想的形状。three.js内置的这些几何确实够平常使用，还可以通过顶点实现效果。案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-09/9.html案例代码：<!DOCTYPE html><html><head> <met...原创 2017-07-05 18:06:07 · 3158 阅读 · 3 评论 -
8 Three.js使用轨迹球插件（trackball）增加对模型的交互功能
这是three.js的一个组件，需要额外的引入文件，文件的地址是在官方下载的案例的examples/js/controls/TrackballControls.js。只需要和案例里面一样设置相关的属性，并在实例化的时候讲相机传入。就可以实现交互效果。可以实现的效果：鼠标按住左键可以旋转模型鼠标按住右键拖拽可以移动模型鼠标滚轮可以缩放模型案例查看地址：http://www.wjceo.com/blo...原创 2017-07-12 00:23:31 · 4830 阅读 · 1 评论 -
9 Three.js使用性能插件stats进行性能监听
stats性能插件添加了以后，会默认在左上角显示性能帧数，每次刷新所用时间，占用内存。鼠标左键点击可进行切换，默认显示每秒的帧数。案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-09/11.html 首先需要将stats插件引入，地址是官网下载文件里面的examples/js/libs/stats.min.js。然后需要实例化一个组件，然后添...原创 2017-07-12 10:20:17 · 6257 阅读 · 3 评论 -
10 Three.js使用orbit controls插件（轨道控制）来控制模型交互动作
案例查看效果地址：http://www.wjceo.com/blog/threejs/2018-02-09/12.html这个效果相对于第八节的轨迹球插件使用上感觉要好，虽然轨迹球插件可以来回的滚动，但是容易分辨不清楚上下左右的关系，容易混乱，适合调试，而轨道控制插件orbit则适合客户使用，还不会产生混乱效果。下面讲一下使用。（1）首先引入插件，文件地址在官方案例的examples/js/con...原创 2017-07-13 01:08:41 · 12395 阅读 · 1 评论 -
11 Three.js使用Detector.js插件实现兼容性检测
其实Detector.js插件的代码很短，但是功能很全，（1）判断canvas兼容。（2）判断webgl兼容性。（3）在页面添加不兼容提示信息。这三个功能已经对兼容性检测足够了。使用方式也很简单：首先，将插件引入到页面：<script src="examples/js/Detector.js"></script>然后，在js里面添加一个判断：if ( ! Detector....原创 2017-07-19 11:22:54 · 10091 阅读 · 4 评论 -
12 Three.js官方文档介绍的相关对象功能列表
Cameras（照相机，控制投影方式）CameraOrthographicCameraPerspectiveCameraCore（核心对象）BufferGeometryClock（用来记录时间）EventDispatcherFace3Face4GeometryObject3DProjectorRaycaster（计算鼠标拾取物体时很有用的对象）原创 2017-07-21 09:13:00 · 1634 阅读 · 0 评论 -
13 Three.js照相机的正交投影和透视投影
这一篇文章会的人也不看，不会的人也不需要专业术语，我直接大白话介绍一下webgl里面的照相机。照相机就相当于在模型世界中，设置一个位置，将前方的内容拍摄下来，然后再给canvas，在窗口里面显示出来在当前位置的图像。再说的简单一些，就相当于我们拿着手机拍了一张照片，放到了窗口里面显示出来。而动画则是一直拍，一直显示而已。因为绘制出来的图形是3d的，而我们的显示屏只能显示2d的图片。所以原创 2017-07-21 10:50:44 · 6846 阅读 · 1 评论 -
14 Three.js绘制字体模型
案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/16.html使用three.js绘制字体模型，没有想象当中那么难。首先你需要实例化 THREE.FontLoader() 来进行json格式的文字格式加载，在加载成功的回调函数里面进行创建网格。然后通过THREE.TextBufferGeometry或者THREE.TextGeometry方法...原创 2017-07-23 20:03:34 · 5113 阅读 · 3 评论 -
15 Three.js实现阴影效果
案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/17.html作为webgl的插件，three.js肯定没有原生webgl那样，添加一个阴影这么费劲。所以，经过博主一小时的研究（笨人不聪明，已经是极限速度了）。终于将阴影效果做了出来，并且还发现一些容易犯错的地方。先上张图避避邪：实现这个效果其实很简单，只需要设置几个属性就可以实现当前的效果。...原创 2017-07-27 11:21:50 · 9558 阅读 · 10 评论 -
16 Three.js使用dat.GUI简化试验流程
简介使用这个插件的最省事的地方在于，调试很方便的调节相关的值，从而影响最后绘制的结果。而dat.GUI实现的东西也很简单，理解起来也很好理解。案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/18.html我们实例化dat.GUI对象后，会在右上角显示出一些可以调节的参数，比如：这就是今天的案例制作出来的五个可以调节的属性。而且实现起来也很简单...原创 2017-07-31 22:46:21 · 11758 阅读 · 3 评论 -
17 Three.js针对浏览器变动进行自适应
案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/19.html可以改变页面大小测试效果。有的时候，我们打开了浏览器的页面，显示了当前的渲染的模型。但是，如果你没有设置场景模型跟随着浏览器的宽高度变化进行自适应，就gg了。所以，今天额外补上一篇相关的怎么跟随浏览器变动进行自适应。要是场景随着浏览器的大小变动进行自适应，就需要监听window的r...原创 2017-07-31 23:49:28 · 3529 阅读 · 0 评论 -
18 Three.js的场景对象
通过这一段时间的学习，发现还没有介绍过场景的基本组件。这一节就简单的介绍一下相关的内容：如果我们想让物体显示出来，首先，我们需要有一个渲染器（new THREE.WebGLRenderer()）来渲染模型和相机。渲染的模型需要放到场景（THREE.Scene()）对象中，场景对象就是专门放置模型等一系列组件的地方，必须有一个模型和一个光源才可以显示出来模型。最后需要使用调用实例化的渲染原创 2017-08-03 23:08:58 · 2339 阅读 · 0 评论 -
19 Three.js实现雾化效果
案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/21.html如果使用three.js实现雾化效果很简单，只需要在给场景scene对象的fog属性添加值就好了，比如： scene.fog = new THREE.Fog(0xffffff,100,120);这样就给场景添加了雾化的效果，在实例化雾化的对象的时候，需要传三个值（雾的...原创 2017-08-05 11:14:07 · 7590 阅读 · 0 评论 -
20 Three.js实现场景所有物体使用相同的材质
scene.overrideMaterial可以强制场景内的所有的物体使用相同的指定材质来绘制图形。案例查看地址http://www.wjceo.com/blog/threejs/2018-02-12/22.html具体使用案例，我在案例中给场景的相关属性添加了： //场景内所有模型都使用同一种材质 scene.overrideMaterial = new THREE...原创 2017-08-05 11:49:04 · 1869 阅读 · 0 评论 -
21 Three.js使用顶点绘制立方体
我们在学些WebGL基础的时候每天都是在一直研究顶点位置，法向量，绘制下标什么的。虽然复杂，但是毕竟原生，性能没得说。three.js也给我们提供了相关的接口供我们使用原生的方法绘制模型下面是我的个人一个案例。案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/23.html首先，我创建了一个空白的形状： /...原创 2017-08-05 16:48:55 · 8334 阅读 · 4 评论 -
22 Three.js的网格对象MESH的属性和方法
创建一个网格需要一个几何体，以及一个或多个材质。当网格创建好之后，我们就可以将它添加到场景中并进行渲染。网格对象提供了几个属性和方法用于改变它在场景中的位置和显示效果。如下： 还有一个属性就是visible属性，默认为true，如果设置为false，THREE.Mesh将不渲染到场景中。案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12...原创 2017-08-06 21:53:31 · 15997 阅读 · 5 评论 -
23 Three.js的光源种类
为什么需要光源？我们能看到物体都是因为有光的反射效果，不同的物体反射出来的光也就显示出来了不同的颜色。所以，three.js框架模拟了一些现实生活中的光源来实现所需要的效果。光源的种类 名字 描述 THREE.AmbientLight 这是一个基础光源，也叫环境光源，该光源的颜色将会叠加到场景现有的颜色上面，无法创建阴影。 THREE.PointLight 点光源，从空间的一点原创 2017-08-15 17:54:52 · 1975 阅读 · 1 评论 -
24 Three.js的环境光源THREE.AmbientLight
作用场景当中添加了THREE.AmbientLight光源，光源的颜色将会影响全局的每一个物体每一个面的颜色。该光源没有特别得来源方向，也不会产生阴影。 通常不会使用THREE.AmbientLight作为场景内的唯一光源，一般配合点光源或者平行光等光源使用。其作用是为了弱化阴影或给场景添加一些额外的颜色。个人感觉重要的作用是，不添加环境光源，如果点光源照射不到的面，three.js压根就不...原创 2017-08-15 23:05:25 · 10956 阅读 · 0 评论 -
25 Three.js的点光源THREE.PointLight
介绍Three.js库中的THREE.PointLight（点光源）是一种单点发光、照射所有方向的光源。比如夜空中的照明弹。案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/27.htmlTHREE.PointLight的相关属性 属性 描述 color（颜色） 光源的颜色，详情见上一节 dis...原创 2017-08-17 00:00:48 · 3806 阅读 · 0 评论 -
26 Three.js的聚光灯光源THREE.SpotLight
介绍THREE.SpotLight（聚光灯灯源）是最常使用的光源之一。THREE.SpotLight是一种具有锥形效果的光源。比如：手电筒。案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/28.html相关属性由于Three.js的版本更新过快，有可能有我没有测试的属性已经被抛弃了，如果大家有知道的已经被抛弃掉的记得给我留言。...原创 2017-08-17 11:04:57 · 4558 阅读 · 0 评论 -
27 Three.js的平行光THREE.DirectionalLight
简介THREE.DirectionalLight平行光可以看作距离很远的光。它发出的所有光线都是平行的。比如太阳光，由于太阳离我们很远，我们可以把太阳的光线看作是平行的。案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/29.html与点光源和聚光灯光源的区别最大的区别就是，点光源和聚光灯光源距离物体越远光线越暗。光是从一点发出...原创 2017-08-22 01:27:36 · 14848 阅读 · 0 评论 -
28 Three.js的特殊光源THREE.HemisphereLight户外光照光源
简介此光源可以创建出更加贴近自然的户外光照效果。就是为了模拟在户外场景中的反光效果。案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/30.html光源简单的创建首先实例化函数：var hemiLight = new THREE.HemisphereLight(天空的反光颜色,地面的反光颜色,光的强度);然后设置光的...原创 2017-08-25 01:19:51 · 4636 阅读 · 0 评论 -
29 Three.js的特殊光源THREE.RectAreaLight窗口射入光线模拟
简介这种光在整个面上均匀地发射出一个矩形平面。这可以用来模拟像明亮的窗户或带状照明的东西。案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/31.html简单创建由于是特殊光源，而且比较复杂，所以此灯光需要额外引入插件来创建<script src="examples/js/lights/RectAreaLightU...原创 2017-08-31 00:50:25 · 2926 阅读 · 0 评论 -
30 Three.js的相机飞行控件FlyControls
简介FlyControls是相机的控件，飞行模拟器控件,用键盘和鼠标控制相机移动和旋转。这个控件使用可以把相机想象成是无人机的摄像头。案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/32.html操作方式A键和D键控制镜头左右移动 W键|鼠标左键和S键|鼠标右键控制镜头前进后退 R键和F键控制镜头的前进后退 Q键和E键控...原创 2017-09-01 01:48:03 · 6132 阅读 · 3 评论 -
31 Three.js的特殊光源镜头光晕（lens flare）
简介当你直接朝着太阳或者一个非常明亮的灯光的时候就会出现镜头光晕效果。大多数情况会避免这种效果，但是如果对于游戏或者三维图形来说，它提供了一种很好的效果，让场景看上去更加真实。案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/33.html创建镜头光晕方法var lensFlare =new THREE.LensFlare(...原创 2017-09-01 02:55:07 · 8437 阅读 · 2 评论 -
32 Three.js的材质的种类和共有属性
种类 名称 描述 MeshBasicMaterial（网格基础材质） 基础材质，用于给几何体赋予一种简单的颜色，可以显示几何体的线框 MeshDepthMaterial（网格深度材质） 这个材质使用从摄像机到网格的距离来决定如何给网格上色 MeshNormalMaterial（网格法向材质） 这是一种简单的材质，根据法向向量计算物体表面的颜色 MeshFaceMat原创 2017-09-03 02:07:50 · 2194 阅读 · 0 评论 -
33 Three.js的材质THREE.MeshBasicMaterial
简介MeshBasicMaterial是一种非常简单的材质，这种材质不考虑场景中光照的影响。使用这种材质的网格会被渲染成简单的平面多边形，而且也可以显示几何体的线框。设置属性Three.js除了可以设置共有的属性外，还可以设置以下属性： 名称 描述 color（颜色） 设置材质的颜色 wireframe（线框） 设置这个属性的可以将材质渲染...原创 2017-09-03 20:53:12 · 19358 阅读 · 0 评论 -
34 Three.js的材质THREE.MeshDepthMaterial
简介使用THREE.MeshDepthMaterial材质的物体，其外观不是由光照或某个材质属性决定的，二十有物体到摄像机的距离决定的。可以将这种材质与其他材质结合使用，从而很容易地创建出逐渐消失的效果。 摄像机的near属性和far属性之间的距离决定了场景的亮度和物体消失的速度。如果这个距离非常大，那么当物体远离摄像机时，只会稍微消失一点。如果这个距离非常小，那么物体消失的效果会非常明显。...原创 2017-09-04 00:03:04 · 2634 阅读 · 1 评论