达人课
关注
分享
扫一扫
文章平均质量分 92
暮志未晚NAN
这个作者很懒，什么都没留下…
展开
-
02 初识Three.js
上一节最后，我书写了一个简单案例代码供大家一起查看Three.js的HELLO WORLD。案例没有什么复杂的东西，也就是一个旋转的立方体。接下来，我带着大家一起来讲解一下是如何实现这个最简单的案例，以及Three.js的一些最基本的构件。构建场景按照代码的运行顺序，首先，我们需要先将Three.js库的js文件引入：<script src="https:/原创 2018-10-08 17:16:49 · 5564 阅读 · 14 评论 -
03 Scene场景及页面调试插件
场景是我们每个Three.js项目里面放置内容的容器，我们也可以拥有多个场景进行切换展示，你可以在场景内放置你的模型，灯光和照相机。还可以通过调整场景的位置，让场景内的所有内容都一起跟着调整位置。场景的结构之前在刚刚开始学JavaScript的基础时，我们总免不了去操作dom对象，而且我们都知道dom的结构都是树形结构的，Three.js也遵循了这样的理念，将所有可以添加到场景内的结构梳理...原创 2018-10-08 17:17:11 · 4686 阅读 · 4 评论 -
04 Geometry几何体
前一节讲解了一下场景的结构和基类THREE.Object3D，对Three.js的结构有了一个大概的了解，我们的代码案例还是停留在显示一个立方体的状态。这一节，我们将制作更多的几何体形状。 一个模型是由几何体Geometry和材质material组成。Three.js内置了很多的几何体种类，如：立方体、三棱锥、球、八面体、十二面体、二十面体等等，这一节我们将介绍一下这些类型几何体的模型创建和几何...原创 2018-10-08 17:17:27 · 5540 阅读 · 1 评论 -
05 Material材质
上一节我们说了模型的形状以后，这一节我们讲解一下模型的表现，也就是我们看到的模型的外观——材质。 简单的说就是物体看起来是什么质地。材质可以看成是材料和质感的结合。在渲染程式中，它是表面各可视属性的结合，这些可视属性是指表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等。Three.js给我们封装好了大部分的材质效果，避免我们使用复杂的shader语言自己去实现。接下来我们先介绍一下Ma...原创 2018-10-08 17:18:00 · 4406 阅读 · 1 评论 -
06 Light光照
通过之前的内容，我们已经了解一个模型的创建整个过程。接下来，我们将学习如果实现在场景中添加光效和阴影效果。首先我们先介绍一下光照的创建：创建光照在上一节，因为案例需求，我们创建过一次光照效果：var light = new THREE.DirectionalLight(0xffffff); //添加了一个白色的平行光并且还在场景中添加了一个全局光照：scene.add(ne...原创 2018-10-08 17:18:14 · 2090 阅读 · 3 评论 -
08 Points 粒子
这是基础的最后一节，同过前面的课程到现在，基础的相关内容大家应该有了一个大概的认识，我们也能够实现一些简单的场景显示。在这一节，我们将学习到Sprite精灵和Points粒子两项东西，这两种对象共同点就是我们通过相机查看它们时，始终看到的是它们的正面，它们总朝向相机。通过它们的这种特性，我们可以实现广告牌的效果，或实现更多的比如雨雪、烟雾等更加绚丽的特效。Sprite 精灵精灵由于一直正对...原创 2018-10-08 17:18:43 · 1863 阅读 · 0 评论 -
10 Loaders加载模型到Three.js
现在市面上的3D模型有上百种，每一种的格式都有不同的用途，不同的功能和复杂程度。尽管Three.js提供了很多的加载器，但选择正确的格式和工作流程将在以后节省时间和成本。而且某些格式难以使用，效率低下或者目前还未完全支持。推荐使用的模型格式官方推荐我们使用的3D模型的格式为glTF，由于glTF专注于传输，因此它的传输和解析的速度都很快。glTF模型功能包括：网格，材质，纹理，蒙皮，骨...原创 2018-10-08 17:19:08 · 15390 阅读 · 3 评论 -
11 Animation动画
这些天有些忙，导致一个多星期没有更新文章，群里的小伙伴也天天催我更。为了表示歉意，我决定在现在的基础上面增加一节Three.js核心类的相关介绍，来让让小伙伴们能更清楚的了解相关的基础内容。下面我们开始这一节的内容，动画。 动画一般可以定义两种：一种是变形动画，另一种是骨骼动画。下面，我们先介绍一下变形动画。变形动画变形动画的实现就是通过修改当前模型的顶点位置来实现动画。就比如，一个动画...原创 2018-10-08 17:19:21 · 3351 阅读 · 2 评论 -
12 使用 Tween.js 创建补间动画
Tween是什么补间(动画)（来自 in-between）是一个概念，允许你以平滑的方式更改对象的属性。你只需告诉它哪些属性要更改，当补间结束运行时它们应该具有哪些最终值，以及这需要多长时间，补间引擎将负责计算从起始点到结束点的值。 在Three.js中，我们也有一些修改模型的位置，旋转和缩放的需求，我们无法直接在webgl中使用css3动画，所以，Tween给我们提供了一个很好的解决方案。...原创 2018-10-08 17:19:42 · 2810 阅读 · 0 评论 -
13 Three.js场景交互
由于浏览器是一个2d视口，而在里面显示three.js的内容是3d场景，所以，现在有一个问题就是如何将2d视口的x和y坐标转换成three.js场景中的3d坐标。好在three.js已经有了解决相关问题的方案，那就是THREE.Raycaster射线，用于鼠标拾取（计算出鼠标移过的三维空间中的对象）等等。我们看一张图片： 我们一般都会设置三维场景的显示区域，如果，指明当前显示的2d坐标给TH...原创 2018-10-08 17:20:02 · 6533 阅读 · 1 评论 -
14 Three.js 性能优化
尽量共用几何体和材质如果你需要创建三百个简单的相同颜色的立方体模型：for (let i = 0; i < 300; i++) { let geometry = new THREE.BoxGeometry(10, 10, 10); let material = new THREE.MeshLambertMaterial({color: 0x00ffff}); ...原创 2018-10-08 17:20:14 · 8458 阅读 · 0 评论 -
15 Three.js核心对象
写到这一节也算是到了最后一节介绍Three.js内容的章节（最后一节是一个案例作品），考虑到支持我的朋友也希望能够多学一些内容，故添加了本节介绍一下Three.js里面经常接触到的对象。THREE.Clock时间对象用于跟踪时间，用于计算每一帧的渲染时间或者是从开始渲染到现在的时间。构造函数var clock = new THREE.Clock();实例化时间对象还可以接收...原创 2018-10-08 17:20:22 · 1826 阅读 · 2 评论 -
16 Three.js 游戏操作案例
上面是我们这节教程最后显示出来的效果。案例实现了人物跟随着移动操作杆进行移动并执行跑步动作，右边的攻击按钮可以实现攻击，短时间内连按可以实现不同的攻击动作。接下来我将和大家一起一步一步的实现这个效果。场景的搭建首先，我们需要把舞台搭建出来，先创建scene场景：创建scenescene = new THREE.Scene();scene.background = ne...原创 2018-10-08 17:20:35 · 6700 阅读 · 11 评论 -
本人的项目案例
bim案例：http://www.wjceo.com/examples/demo/bim/街景案例：http://www.wjceo.com/examples/demo/streetscape/移动端展示效果：http://www.wjceo.com/examples/demo/3dartTest/ （点击建筑大门可以移动到建筑内部）个人普通案例网站：http://www.wjceo.com...原创 2019-07-08 14:49:40 · 4343 阅读 · 5 评论