- 博客(27)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 82 Three.js 使用第一视角控制器FirstPersonControls控制相机
简介顾名思义，通过第一视角控制器你可以像第一视角射击游戏那样控制摄像机。鼠标用于控制视角，键盘用于控制移动角色。本人感觉最类似的效果就是cs游戏死亡后，能够随意漂浮的感觉。案例实现案例查看地址：http://www.wjceo.com/blog/threejs/2018-03-29/142.html 首先，引入相关库文件，其中，我们额外引入了一个处理颜色的库叫chroma....
2018-03-29 20:47:33
12045
8
转载 Three.js 透明物体不能正常显示/渲染顺序的控制问题
本篇文章主要讨论Three.js中的渲染机制，以及在部分场景中透明的物体渲染不正确，渲染顺序错误等问题。国内好像很少有人有讨论这方面的问题，stackoverflow以及github倒是很多。在本文的最后将会贴出参考文章的地址。此外，如果本文观点有任何错误，欢迎各位指出，一起学习进步，谢谢！Three.js的渲染机制three的渲染器是基于webGL的。它的渲染机制是根据物体离照相机的距离...
2018-03-29 09:35:22
10580
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
12830
4
转载 Tween.js补间动画插件入门
tween.js是一款可生成平滑动画效果的js动画库。 tween.js允许你以平滑的方式修改元素的属性值。你只需要告诉tween你想修改什么值，以及动画结束时它的最终值是什么，动画花费多少时间等信息，tween引擎就可以计算从开始动画点到结束动画点之间值，来产生平滑的动画效果。简单实现例如，假设你有一个对象position，它的坐标为 x 和 y：var position ...
2018-03-26 14:06:03
2581
1
原创 80 Three.js 的基础动画
简介模型导入到上一节也就先告一段落了，接下来，我将学习动画方面的知识。在这之前，我先复习了一下基础变化的相关知识。 基础动画就是缩放、位置和旋转，也就是配置模型的scale、position和rotation。我直接写了一个案例，来实现三种动画。实现案例案例查看地址：http://www.wjceo.com/blog/threejs/2018-03-25/140.html - ...
2018-03-25 23:07:51
2233
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
2841
2
原创 78 Three.js 导入PDB格式的模型
简介PDB是一种非常特殊的格式，由Protein Data Bank（蛋白质数据银行）创建，用于定义蛋白质的形状。蛋白质数据银行（www.rcsb.org）包含了很多分子和蛋白质的详细信息，还可以用PDB格式下载这些分子的数据结构。在Three.js中有一种加载器可以加载PDB格式的文件。实现案例案例查看地址：http://www.wjceo.com/blog/threejs/20...
2018-03-22 21:47:54
1938
5
原创 77 Three.js 导入BABYLON格式的模型
简介Babylon是一个三维JavaScript游戏库，它以自己的内部格式存储模型。有关这方面的信息请访问http://www.babylonjs.com实现案例案例查看地址：http://www.wjceo.com/blog/threejs/2018-03-22/137.html首先，引入script加载器<script src="/lib/js/loaders...
2018-03-21 23:59:46
3179
1
原创 76 Three.js 导入VRML格式的模型
简介VRML是Virtual Reality Modeling Language的缩写。这是一种基于文本的格式，允许定义三维对象和世界。它已被X3D文件格式取代。Three.js不支持加载X3D模型，但这些模型可以很容易地转换成其他格式。更多信息请访问http://www.x3dom.org/?page_id=532#实现案例案例查看地址：http://www.wjceo.com/...
2018-03-21 23:48:36
3398
2
原创 75 Three.js 导入ASSIMP格式的模型
简介Open asset import library（也称为Assimp）是一种导入各种三维模型格式的标准方法，是用此加载程序，由assimp2json转换的大量三维格式都可以导入模型，更多详细信息请访问https://github.com/acgessler/assimp2json实现案例案例查看地址：http://www.wjceo.com/blog/threejs/2018...
2018-03-21 23:10:13
1024
1
原创 74 Three.js 导入AWD格式的模型
简介AWD是一种用于三维场景的二进制格式，并且通常与http://away3d.com/引擎一起使用。请注意，此加载程序不支持压缩的AWD文件。实现案例案例查看地址：http://www.wjceo.com/blog/threejs/2018-03-22/134.html首先，引入script加载器<script src="/lib/js/loaders/AWDL...
2018-03-21 20:44:36
858
2
原创 73 Three.js 导入PLY格式的模型
简介PLY格式的全称是多边形（Polygon）文件格式，通常用来保存三维扫描仪的信息。这种格式只保存几何体数据，没有纹理颜色。实现案例案例查看地址：http://www.wjceo.com/blog/threejs/2018-03-22/133.html首先，引入script加载器<script src="/lib/js/loaders/PLYLoader.js"...
2018-03-21 20:32:30
6886
11
原创 72 Three.js 导入VTK格式的模型
简介VTK是由Visualization Toolkit创建的一种格式，用来指定顶点和面。VTK有两种格式：二进制和基于文本的ASCII。Three.js只支持基于ASCII的格式。实现案例案例查看地址：http://www.wjceo.com/blog/threejs/2018-03-20/132.html首先，引入script加载器<script src="/...
2018-03-20 22:24:48
3344
1
原创 71 Three.js 导入CTM格式的模型
简介CTM是由openCTM创建的一种文件格式，可以用来以压缩格式存储三维网格的三角形面片。实现案例案例查看地址：http://www.wjceo.com/blog/threejs/2018-03-20/131.html首先，引入script加载器<script src="/lib/js/loaders/ctm/lzma.js"></script>...
2018-03-20 22:15:48
2139
3
原创 70 Three.js 导入STL格式的模型
简介STL是STLereoLithography（立体成型术）的缩写，广泛用于快速成型。例如三维打印机的模型文件通常是STL文件。 Three.js还有一个可定制的STL导出器，叫作OBJExporter.js，可以用来将Three.js中的模型导出到一个OBJ文件。实现案例案例查看地址：http://www.wjceo.com/blog/threejs/2018-03-20/1...
2018-03-20 22:03:09
10647
11
原创 69 Three.js 导入Collada(.dae)格式的模型
简介Collada是一种用基于XML的格式定义数字内容的格式。这也是一种被广泛使用的格式，差不多所有的三维软件和渲染引擎都支持这种格式。 Collada模型中不仅定义了几何体，也定义了材质，甚至还可以定义光源。实现案例案例查看地址：http://www.wjceo.com/blog/threejs/2018-03-20/129.html首先，引入script加载器&l...
2018-03-20 20:50:54
8558
3
原创 68 Three.js 导入OBJ格式和MTL的格式
简介OBJ和MTL是相互配合的两种格式，经常一起使用。OBJ文件定义几何体，而MTL文件定义所用的材质。OBJ和MTL都是基于文本的格式。 Three.js可以很好地理解OBJ文件和MTL文件，而且Blender也支持这两种文件格式。所以作为替代方案，你也可以在Blender里选择OBJ/MTL格式的文件，而不是Three.js的JSON格式文件。在Three.js里提供两种不同的加载器。如...
2018-03-19 21:52:48
8383
6
原创 67 Three.js 导入OBJ格式的模型
简介OBJ是一种简单的三维文件格式，由Wavefront Technologies创建。它是使用最广泛的三维文件格式，用来定义对象的几何体。MTL文件常同OBJ文件一起使用。 Three.js还有一个可定制的OBJ导出器，叫做OBJExporter.js，可以用来将Three.js中的模型导出一个OBJ文件。实现过程案例查看地址：http://www.wjceo.com/blog...
2018-03-19 21:04:58
9637
16
原创 66 Three.js 导入blender生成的JSON文件
简介有很多三维软件可以用来创建复杂的网格。我们今天将的是Blender（www.blender.org）。Three.js库有一个Blender（以及Maya和3D Studio Max）导出器，可以直接将文件导入为Three.js的JSON格式。这一节，我们一起学习一下如何配置Blender如何导出，以及在Three.js如何引入导出的JSON文件。配置BLENDER导出器想要从...
2018-03-19 00:09:56
10516
1
原创 65 Three.js 使用JSON格式保存和加载整个场景
前言本人是用开发指南里面的教程发现在新版本里面你的方法已经无法实现，所以，我们采用保存和加载模型的方法进行实现场景。实现案例查看地址：http://www.wjceo.com/blog/threejs/2018-03-18/125.html 首先，将scene场景转化为JSON对象，然后将JSON对象转换成为JSON字符串，就可以存储到本地存储。在案例当中可以通过点击export...
2018-03-18 21:25:38
9315
6
原创 64 Three.js 使用JSON格式保存和加载模型
前言学习从外部资源中加载几何体，首先我们学会如何保存和加载Three.js的JSON格式文件。简单案例案例查看地址：http://www.wjceo.com/blog/threejs/2018-03-15/124.html 在Three.js中导出JSON文件非常容易，并且不需要引入额外的库。你需要做的只是将THREE.Mesh导出为JSON，代码如下：var result ...
2018-03-15 22:14:28
9324
3
转载 为什么说DOM操作很慢
一直都听说DOM很慢，要尽量少的去操作DOM，于是就想进一步去探究下为什么大家都会这样说，在网上学习了一些资料，这边整理出来。 首先，DOM对象本身也是一个js对象，所以严格来说，并不是操作这个对象慢，而是说操作了这个对象后，会触发一些浏览器行为，比如布局（layout）和绘制（paint）。下面主要先介绍下这些浏览器行为，阐述一个页面是怎么最终被呈现出来的，另外还会从代码的角度，来说明一些...
2018-03-15 17:18:16
1366
2
原创 63 Three.js 将多个网格合并成一个网格
简介多数情况下使用组可以很容易地操纵和管理大量网格。但是当对象的数量非常多时，性能就会成为一个瓶颈。使用组，每个对象还是独立的，仍然需要对它们分别进行处理和渲染。通过THREE.Geometry.merge()函数，你可以将多个几何体合并起来创建一个联合体。 查看案例：http://www.wjceo.com/blog/threejs/2018-03-14/123.html 当我们使用普通...
2018-03-14 20:11:22
9800
2
原创 62 Three.js 使用对象组合
简介将多个模型放到一个组里面，就是一个对象组合。 创建组非常简单，每个你创建的网格都可以包含子元素，子元素可以使用add函数来添加。在组中添加子元素的效果是：你可以移动、缩放、旋转和变形父对象，而所有的子对象都将会受到影响。 我们可以查看一个例子，案例查看地址：http://www.wjceo.com/blog/threejs/2018-03-13/120.html 点击勾选右上角的ro...
2018-03-13 21:51:29
2521
1
原创 61 Three.js 从高级几何体创建THREE.Points
整如你所记得的，THREE.Points基于几何体的顶点来渲染每个粒子。也就是说，我们提供一个复杂的几何体（比如环状扭结或者管），我们就可以基于这个几何体的顶点创建出一个THREE.Points对象。 如上图所示，每一个用来生成环状扭结的顶点都是一个粒子。这个发光的粒子是我们使用canvas绘制出来的。在案例中查看代码方法generateSprite。 然后我们又书写了两个方法，一个是生成正常...
2018-03-12 22:07:02
4256
1
原创 60 Three.js 使用精灵贴图创建类似HUD层
使用的案例还是上一节的案例代码，由于上一节我们使用了两个scene和两个camera进行渲染，所以，现在我们只要查看怎么实现精灵贴图。 查看案例代码sreateSprite方法，我们可以看到，一张纹理我们直接导入了多个小怪物的图片，重点就是我们怎么切换图片。 纹理是固定的，我们可以通过map.offset和map.repeat属性，来让图片正确的显示其中的一个小怪物。 通过map.offse...
2018-03-12 21:53:51
3597
1
原创 59 Three.js 渲染两个场景和使用不同的相机，渲染在一个场景里面
前言以前的时候没有试过，能不能把两个不同scene内的内容，渲染在同一个场景内呢？并且使用不同的相机？实现实现上面的疑问很简单，只要用renderer分别渲染两次即可，顺序如下：首先，先渲染第一个scene和camera，renderer.render(scene1, camera1);然后，将renderer的autoClear属性设置为false，这样，进...
2018-03-12 21:28:10
9635
8
Substance Painter 和 Unity 同步Standard
2023-09-22
InstantOC Dynamic Occlusion Culling LOD 3.0.0
2022-09-29
three.js开发指南-资源部分
2017-12-25
three.js开发指南-代码部分
2017-12-25
webpack配置es6+less开发环境
2017-11-17
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人