Three.js笔记
关注
分享
扫一扫
文章平均质量分 75
暮志未晚NAN
这个作者很懒，什么都没留下…
展开
-
116 Three.js实现地形扫描效果
以上是当前效果，实现逻辑后面补上。原创 2020-09-01 23:18:31 · 3588 阅读 · 0 评论 -
115 Three.js实现地形显示隐藏过渡效果
这个就是此逻辑的效果，实现后面补上。原创 2020-09-01 23:15:43 · 1673 阅读 · 0 评论 -
114 Three.js实现深度遮挡的下雨特效
以上为当前效果的动图。原创 2020-09-01 23:11:53 · 3738 阅读 · 1 评论 -
113 Three.js的obb （OrientedboundingBox）方向包围盒的使用
一、包围盒简介：包围盒是一个简单的几何空间，里面包含着复杂形状的物体。为物体添加包围体的目的是快速的进行碰撞检测或者进行精确的碰撞检测之前进行过滤（即当包围体碰撞，才进行精确碰撞检测和处理）。包围体类型包括球体、轴对齐包围盒（AABB）、有向包围盒（OBB）、8-DOP以及凸壳。包围盒广泛地应用于碰撞检测，比如射击、点击、相撞等，每一个物体都有自己的包围盒。因为包围盒一般为规则物体，因此用它来代替物体本身进行计算，会比直接用物体本身更加高效和简单。目前广泛应用的是AABB和OBB包围盒，其中AA原创 2020-08-28 15:18:11 · 6794 阅读 · 4 评论 -
112 Three.js postProcess 后处理内置shader包
threejs的后期处理通道包提供了各种强大的效果，有了这些效果会大大降低代码难度，可以直接使用内置的着色器包，避免了复杂的着色器代码编写。效果示例：实现方式：初始化效果组合器composer=new THREE.EffectComposer(renderer); //该参数是WebGLRenderer对象为了保证组合器的正常使用，必要的引用包，在工程文件下可找到，这四个都是必须的，并且注意引用的顺序，如果顺序不对，浏览器控制台会报错的 <script src="js/pos转载 2020-07-30 17:28:01 · 1774 阅读 · 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 · 2108 阅读 · 3 评论 -
43 Three.js自定义二维图形THREE.ShapeGeometry
简介通过THREE.ShapeGeometry，你可以调用几个函数来创建自己的图形。我们可以使用线条（line）、曲线（curve）和样条曲线（spline）创建图形的轮廓。还可以使用THREE.Shape对象的holes属性给这个图形打几个孔。创建THREE.ShapeGeometry对象使用THREE.Shape对象绘制完成后，需要创建THREE.ShapeGeometry几何...原创 2020-07-22 17:07:29 · 14343 阅读 · 4 评论 -
110 THREE.JS 获取一个点，沿坐标轴的偏转
如果让我们自己算，需要通过三角函数自己求。好在，Three.js封装了自己的数学库，里面有相关的对象，叫Spherical类。这是一个虚拟的球坐标类，我们可以定义一个点通过此类获取到当前的偏转弧度。实例化此类需要三个值：radius phi theta 。radius代表当前点距离原点的距离。phi代表从Y轴正方向沿X轴的旋转角度。theta代表从Z轴正方向逆时针沿Y轴旋转的角度。这三...原创 2019-05-04 03:51:12 · 2189 阅读 · 1 评论 -
109 THREE.JS 判断一个点是否处于一个立方体内
今天不知道是群里的哪个大佬起的头，是山椒大佬还是谁，说起判断一个点是否处于在一个立方体内。然后我想了一下，就写一个案例吧，接下来说一下实现逻辑：首先：将立方体的包围盒更新出来：box.geometry.computeBoundingBox(); //更新几何体的包围盒然后更新立方体的世界矩阵：box.updateMatrixWorld();获取到点的世界坐标系下面的位置：var ...原创 2019-02-28 18:06:14 · 5098 阅读 · 4 评论 -
108 THREE.JS 使用矩阵对3D对象进行位置设置
大家都知道，对模型操作常用的就是 平移，旋转，缩放三种操作。正常我们使用Three.js的时候，都是通过模型对象上面的position rotation scale进行设置相关。Three.js通过这三种依次操作是先进行缩放，然后再旋转，最后再设置的位置。那我们是否能够自己通过矩阵实现对模型的变换呢，答案是可以的，Three.js内部实现了矩阵的使用：任何3D物体Object3D都有三个关联...原创 2019-01-22 19:28:07 · 5593 阅读 · 1 评论 -
107 THREE.JS 使用StereoEffect实现模拟VR双屏
公司的项目里面需求一个手机模拟VR双屏幕的效果，然后可以使用VR头显，将手机放入来查看模拟3d的效果。好在Three.js已经实现了这个功能这个文件位置在官方文件的路径：\examples\js\effects\StereoEffect.js我们可以通过这个路径找到当前版本的双屏幕效果文件。在当前文件夹下面还有一些其他的文件，都是一些实现某些效果的比如实现电影的3d特效的重叠效果，将图像转为代...原创 2019-01-22 18:48:53 · 3922 阅读 · 2 评论 -
106 THREE.JS 实现配合使用web Workers
之前一直想研究一下web Workers多线程处理，页面中使用web Workers大家可以转弯去web Workers多线程看一下如何使用。这篇文章主要实现的是Three.js和web Workers一次简单的结合。本来想实现通过web Workers实现加载的，可惜Three.js使用了过多的window方法，而web Workers线程内是无法获取到window对象，所以，这次实现案例就写...原创 2018-12-21 15:44:02 · 5438 阅读 · 4 评论 -
105 THREE.JS 手动实现相机沿焦点旋转
之前，我们一直使用相机控制器control来实现一些相关操作。比如是：OrbitControls.js，大家普遍都喜欢使用的一种控制器。这种控制器有两个方法：getPolarAngle 和 getAzimuthalAngle来获取相机相对于焦点沿y轴旋转的角度（水平角度）和沿x轴旋转的角度（垂直角度），默认焦点位置是世界坐标的原点（可以额外设置control.target.set()）。待更新...原创 2018-12-04 19:07:52 · 5436 阅读 · 4 评论 -
104 THREE.JS 实现merge后显示相应的材质
之前，我使用merge实现过63 THREE.JS 将多个网格合并成一个网格，当时只是简单的实现了一下几何体的merge，证明merge后的能够提高很大的性能。merge的几何体有弊端就是，merge以后，只是一个整体，无法再分开，也没办法判断点击的哪个物体，这只适合合并一些场景内不再修改的模型。那么问题来了，如果合并的这些模型的材质不一样，还想合并到一块怎么样？接下来我们看一下实现思路。g...原创 2018-11-02 18:55:28 · 3513 阅读 · 0 评论 -
103 THREE.JS 实现局部纹理刷新
前言由于公司的项目需要增加用户体验，而且图片尺寸比较大，动不动就会大于2k，4k，甚至更高。如果直接加载这样尺寸的图片，会需要很长时间，对于用户体验十分的不友好。所以，需要首先加载一张小图，然后将整张大图分块进行加载，这样可以使用户第一时间查看的到图片，并且在一定的时间内，也将分块图片加载进来，更新纹理，提高清晰度。最初我是通过canvas画布实现，创建一块完整图片大小的画布，首先将小图加载...原创 2018-10-24 19:11:32 · 5453 阅读 · 2 评论 -
102 Three.js 使用几何体生成拱门形状
Three.js的几何体已经能够创建很多的几何体模型，但是，远远还达不到特殊需求的几何体模型。今天，我就记一下如何制作特殊几何模型的感想。 这是我制作的一个简单的拱门形状的几何体。这个创建可以使用BSP插件创建两个模型一个立方体和一个圆柱进行求余。但是，今天我们不用插件，自己手动实现。接下来我说一下实现的原理。实现原理大家都知道，点组成的面，面组成的模型。如果我们可以进行顶点的位置调...原创 2018-06-28 22:37:44 · 1399 阅读 · 3 评论 -
101 Three.js 场景世界坐标和平面二维坐标互转
平面坐标转场景坐标这种转换由于是由2D转换为3D，所以转换过于以后，平面的坐标在场景坐标内的位置应该是从相机的near到far的一条直线。所以我们无法确定单个点的坐标，一般都是使用当前2D平面的坐标生成一条射线raycaster，来检测当前射线是否和模型产生相交，而获取到当前模型上的位置以及相关信息。 Three.js也给我们封装了转换的方法，我们只要会使用，就能够实现当前的效果，原理是： ...原创 2018-06-25 10:48:30 · 10268 阅读 · 8 评论 -
100 Three.js使用VideoTexture实现视频Video更新纹理
案例查看地址：简介既然我们可以使用canvas元素创建纹理，Three.js也给我们提供了可以实现video创建纹理的方法。我们通过Three.js提供的VideoTexture来实现创建视频纹理。案例实现首先还是需要有一个video标签，我们将video放到左下角：&amp;lt;video id=&quot;video&quot; autoplay controls &amp;gt; &原创 2018-05-10 23:28:42 · 13712 阅读 · 8 评论 -
99 Three.js使用canvas更新纹理
案例查看地址：简介Three.js可以直接将canvas画布上的图像作为纹理绘制到模型上面。下面我们说一下如何实现案例实现首先，我们创建了一个canvas对象，并使用js在上面循环绘制图像。在上面绘制了一个火在燃烧的动画。&lt;canvas id="surface"&gt;&lt;/canvas&gt;然后我们获取到canvas的dom对象，通过do...原创 2018-05-10 22:23:41 · 7302 阅读 · 2 评论 -
98 Three.js 通过设置纹理属性来修改纹理贴图的位置和大小
案例查看地址：简介前几节我们也了解了纹理一些用法，在这一节，我们进行自定义UV映射。并且还可以查看到wrapS和wrapT两个配置项不同的区别。实现原理要实现通过Three.js改变纹理的UV映射，我们需要用到两个属性：matrixAutoUpdate和matrix。通过设置这两个属性，就可以实现自定义UV映射。 - 首先，我们需要将matrixAutoUpdate属性设置为...原创 2018-05-09 21:53:52 · 16487 阅读 · 1 评论 -
97 Three.js 使用 specularMap 设置高光贴图
案例查看地址：http://www.wjceo.com/blog/threejs/2018-05-03/160.html简介我们可以通过设置高光贴图来实现部分区域反光。通过设置高光贴图，我们会发现，只有海洋部分会有发光，而陆地部分没有高光的效果。 一般来讲，像素的值越高（从黑到白），物体表面就越亮。通常高光贴图会与specular属性一起使用，该属性可以用来决定反光的颜色。案...原创 2018-05-03 22:05:02 · 4670 阅读 · 6 评论 -
96 Three.js 使用cubeCamera相机创建反光效果
案例查看地址：http://www.wjceo.com/blog/threejs/2018-05-03/159.html通过案例可以看到，中间的球体不但可以和上一节一样看到环境贴图的相关纹理，连两边的模型都实现了反光的效果。这主要得益于cubeCamera的强大功能。简介使用THREE.CubeCamera可以为场景中的所要渲染的物体创建快照，并使用这些快照创建CubeMap对象。...原创 2018-05-03 21:43:40 · 4483 阅读 · 1 评论 -
95 Three.js 使用设置envMap环境贴图创建反光效果
案例查看地址：http://www.wjceo.com/blog/threejs/2018-05-03/158.html简介计算环境的反光效果对CPU耗费是非常大，而且通常会使用光线追踪算法。在Three.js中你依然可以实现发光的效果，只不过是做一个假的。我们可以通过将纹理贴图到模型上面来模拟环境纹理反光。案例实现首先，我们使用CubeTextureLoader创建一个...原创 2018-05-03 21:19:17 · 8989 阅读 · 2 评论 -
94 Three.js 使用设置lightMap光照贴图创建阴影效果
案例查看地址：http://www.wjceo.com/blog/threejs/2018-05-03/157.html简介之前的阴影效果都是通过特定的法向贴图或者凹凸贴图再或者使用Three.js渲染生成的，这一节，我们使用另一种方法来创建阴影，也就是使用光照贴图。光照贴图是预先渲染好的的阴影，来模拟真实的阴影。 这种光照贴图的好处是我们再不损害渲染的性能的同时，还能够模拟出真实的...原创 2018-05-03 00:26:45 · 4695 阅读 · 1 评论 -
93 Three.js 使用设置normalMap创建更加细致的凹凸和褶皱
案例查看地址：http://www.wjceo.com/blog/threejs/2018-05-03/156.html左边为设置normalMap后的效果，右边为正常效果。我们会发现设置了normalMap后的立体感非常的强烈。简介法线贴图保存的不是高度信息，二十法向量的方向。简单来讲，使用法向贴图只需要使用很少的顶点和面就可以创建出细节很丰富的模型。 缺点：使用法向贴图最大的...原创 2018-05-02 22:38:42 · 4195 阅读 · 3 评论 -
92 Three.js 使用设置bumpMap凹凸贴图创建褶皱
案例查看地址：http://www.wjceo.com/blog/threejs/2018-05-03/155.html简介凹凸贴图用于为材质增加厚度。我们用到的凹凸贴图是一张灰度图，当然你也可以使用彩色图。像素的密集程度定义的是凹凸的高度，但是凹凸图只包含像素的相对高度，没有任何倾斜的方向信息。所以使用凹凸贴图所能表达的深度信息有限。实现案例首先，我们需要生成两个text...原创 2018-05-02 22:07:08 · 3517 阅读 · 2 评论 -
91 Three.js Texture纹理属性详解
构造函数Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy )案例// load a texture, set wrap mode to repeatvar texture = new THREE.TextureLoader().load( "textu...原创 2018-04-27 23:26:04 · 20337 阅读 · 6 评论 -
90 Three.js 对模型多个动画切换展示
简介上一节本想直接了结动画这一章。最后一想，没有做过模型动画切换的案例。就此，再加一章，关于模型多个动画之间如何切换的问题。案例实现案例查看地址：http://www.wjceo.com/blog/threejs/2018-04-25/153.html首先，我们需要先将模型导入，之前案例已经讲过如何导入，这里就不赘述。//加载模型var loader = new THRE...原创 2018-04-25 23:09:37 · 9005 阅读 · 9 评论 -
89 Three.js 导入dae格式的骨骼绑定动画模型
简介上一节，我们导入了一个官方的FBX格式的骨骼模型，实现了动画效果。这一节，更换了dae格式的模型导入，主要是这个模型返回的数据和FBX的返回格式有一些区别，下面我们将在案例中解析中间的区别。实现案例案例查看地址：http://www.wjceo.com/blog/threejs/2018-04-24/152.html 查看上面的案例图片会发现一个跳舞的帝国士兵，同样，这个...原创 2018-04-24 23:03:22 · 3328 阅读 · 2 评论 -
88 Three.js 导入FBX格式骨骼绑定模型
简介上一节，深入了解了一下SkinnedMesh模型对象的创建。这一节，我们导入外部骨骼绑定的模型，来实现动画显示。由于Three.js支持的三维格式非常多，由于导入模式大同小异，我们就选择两种格式作为案例作为参考。其余的按照相同的套路相信大家也能够导入进来。 带骨骼模型和普通模型导入模式是一样的，不同的是Three.js返回的带骨骼模型的对象里面多了几项与动画相关的配置。案例实现...原创 2018-04-24 22:08:42 · 6026 阅读 · 3 评论 -
87 Three.js 手动创建SkinnedMesh的骨骼和绑定动画
简介这一节，为了提高自己对SkinnedMesh的理解，查看了官方文档里面的对于这一个功能的介绍。发现，官方竟然是通过手动创建了一个模型。并独自绑定了相关的骨骼，我们可以通过dat.gui插件调整骨骼的缩放，位置和转向来查看骨骼的移动对模型造成的相关影响。案例实现案例查看地址：http://www.wjceo.com/blog/threejs/2018-04-22/150.html...原创 2018-04-22 19:44:20 · 4241 阅读 · 7 评论 -
86 Three.js 通过SkinnedMesh来创建骨骼和蒙皮动画
简介变形动画十分简洁。Three.js知道所有目标顶点的位置，实现变形动画所要做的就是将每一个顶点从一个位置变换到另一个位置。而骨骼和蒙皮则要复杂一些。当你使用骨骼创建动画时，你移动一下骨骼，Three.js需要决定如何响应地移动相应的皮肤（一系列顶点）。实现案例 案例查看地址：http://www.wjceo.com/blog/threejs/2018-04-19/147.ht...原创 2018-04-19 21:47:43 · 3417 阅读 · 1 评论 -
85 Three.js 通过设置morphTargetInfluences属性来创建动画
简介morphTargetInfluences属性是mesh对象上面所含有的属性，是专门作用域同等下标下的morphTargets顶点的值对当前默认的顶点值的影响权重。 官网的介绍：An array of weights typically from 0-1 that specify how much of the morph is applied. Undefined by default...原创 2018-04-15 22:35:51 · 2765 阅读 · 2 评论 -
84 Three.js 使用AnimationMixer实现变形动画
前言这几天一直在做一个小游戏案例。来巩固一下之前学到的东西。想看我制作出来的案例特效可以查看网址：http://www.wjceo.com/blog/demo/2018-04-09/144.html 下面开始这一节的内容。简介当我们使用外部软件（如 Blender）创建动画时，通常会有两种主要的动画定义方式： 变形动画和骨骼动画。这一节，我们先了解变形动画。 使用变形动画，你需...原创 2018-04-12 22:05:41 · 11282 阅读 · 4 评论 -
83 Three.js 使用PointerLockControls控制相机实现射击游戏视角
简历指针锁定API允许您在游戏界面中锁定鼠标或其他指针设备，以便您不用绝对定位光标就可以获得坐标变化值，从而准确地判断用户正在做什么，并且还可以防止用户意外地进入另一块屏幕或别的什么地方，从而导致误操作。 这一篇是我从官网上获得的相关控制器的，然后通过官网的案例进行一下修改扩展了一下功能。将案例实现了简单的碰撞检测。案例实现案例查看地址：http://www.wjceo.com/...原创 2018-04-02 22:20:32 · 10093 阅读 · 11 评论 -
82 Three.js 使用第一视角控制器FirstPersonControls控制相机
简介顾名思义，通过第一视角控制器你可以像第一视角射击游戏那样控制摄像机。鼠标用于控制视角，键盘用于控制移动角色。本人感觉最类似的效果就是cs游戏死亡后，能够随意漂浮的感觉。案例实现案例查看地址：http://www.wjceo.com/blog/threejs/2018-03-29/142.html 首先，引入相关库文件，其中，我们额外引入了一个处理颜色的库叫chroma....原创 2018-03-29 20:47:33 · 12188 阅读 · 8 评论 -
Three.js 透明物体不能正常显示/渲染顺序的控制问题
本篇文章主要讨论Three.js中的渲染机制，以及在部分场景中透明的物体渲染不正确，渲染顺序错误等问题。国内好像很少有人有讨论这方面的问题，stackoverflow以及github倒是很多。在本文的最后将会贴出参考文章的地址。此外，如果本文观点有任何错误，欢迎各位指出，一起学习进步，谢谢！Three.js的渲染机制three的渲染器是基于webGL的。它的渲染机制是根据物体离照相机的距离...转载 2018-03-29 09:35:22 · 10859 阅读 · 2 评论 -
81 Three.js 使用TWEEN插件实现动画
简介Tween.js是一个轻量级的JavaScript库，中文官网是：http://www.createjs.cc/tweenjs/。通过这个库可以很容易地实现某个属性在两个值之间的进行过渡，而且起始值和结束值之间的所有中间值都会自动计算出来，这个过程叫作tweening（补间）。基础请查看：Tween.js补间动画插件入门实现案例案例查看地址：http://www.wjceo.c...原创 2018-03-27 20:28:09 · 12969 阅读 · 4 评论 -
80 Three.js 的基础动画
简介模型导入到上一节也就先告一段落了，接下来，我将学习动画方面的知识。在这之前，我先复习了一下基础变化的相关知识。 基础动画就是缩放、位置和旋转，也就是配置模型的scale、position和rotation。我直接写了一个案例，来实现三种动画。实现案例案例查看地址：http://www.wjceo.com/blog/threejs/2018-03-25/140.html - ...原创 2018-03-25 23:07:51 · 2303 阅读 · 1 评论 -
79 Three.js 使用导入的模型生成粒子
简介前几节我已经将现在一些经常使用的模型导入的方法。之前也接触粒子的创建。这个案例是把两者结合起来，通过导入模型获得几何体的数据，然后创建粒子。实现案例案例查看地址：http://www.wjceo.com/blog/threejs/2018-03-25/139.html首先，引入script加载器，这里的案例是使用的STL格式的文件生成，所以，引入STL文件加载器&l...原创 2018-03-25 22:36:04 · 2931 阅读 · 2 评论