webgl
关注
分享
扫一扫
文章平均质量分 83
zhulx_sz
这个作者很懒，什么都没留下…
展开
-
three.js 09-01 之 简单动画
到目前为止，我们已经看到过一些简单的动画，他们都不太复杂。我们在刚开始的几篇博文中就引入一个基础的渲染循环，在随后的一些博文中我们使用这个循环简单地旋转对象，并展示了其他几个基础的动画概念。 从本篇开始，我们将进一步来介绍 three.js 是如何支持动画操作的。我们将会一起来讨论以下四个主题：基础动画：three.js 里所有动画的基础，修改对象的三个属性，即位置、旋转和缩放；移动...原创 2018-02-10 21:30:33 · 548 阅读 · 0 评论 -
three.js 06-04 之 TubeGeometry 高级几何体
今天将要介绍的是 three.js 库中的 TubeGeometry 高级几何体。它将沿着一条三维样条曲线拉伸出一根管子。你可以通过顶点来定义路径，然后利用 TubeGeometry 来创建这根管子。 我们接下来的例子中，将会随机生成一些点，然后利用这些点来生成一根管道。大概思路就如下：我们首先生成一组类型为 THREE.Vector3 的顶点。然后再使用这些点创建管道之前，我们先要把这些点原创 2017-12-28 11:47:52 · 3603 阅读 · 0 评论 -
three.js 06-06 之 TextGeometry 几何体
今天我们来看看在 three.js 中，如何快速的创建三维文本效果。在 three.js 中渲染文本非常简单，你所要做的只是指定想用的字体，以及基本的拉伸属性（基本上就是 ExtrudeGeometry 上提到的那些属性，极个别的除外）。我们先看看具体都有哪些属性，如下表所示：属性描述font可选。此属性指定要用的字体，它是一个 THREE.Font原创 2018-01-11 12:39:22 · 1635 阅读 · 0 评论 -
three.js 02-03 之自定义形状
上一篇，我们已经学习了如何使用 Three.js 提供的几种常用的几何对象及网格。今天，我们来重点学习一下，如何通过自定义顶点和面来构建自己的几何体，并用它来创建网格。我们先来一个完整的例子，代码如下： 示例 02.02 - 使用几何及网格对象 body { /* 设置 margin 为 0，并且 o原创 2017-11-03 16:46:04 · 3401 阅读 · 1 评论 -
three.js 06-03 之 ExtrudeGeometry 高级几何体
本篇介绍 three.js 中的 ExtrudeGeometry 拉伸几何体。它是从一个二维图形创建出一个三维图形。譬如，我们可以先通过 THREE.Shap 对象，先创建一个二维的图形，然后通过 ExtrudeGeometry 将它拉伸为一个三维图形。也可以先通过 THREE.PlaneGeometry 对象创建一个二维平面，然后再利用 ExtrudeGeometry 进行拉伸。关于 Extru原创 2017-12-27 17:39:09 · 6208 阅读 · 1 评论 -
three.js 05-06 之 CylinderGeometry 几何体
今天将要介绍的是 CylinderGeometry 几何体。这也是一种非常简单的三维几何体，你甚至不需要指定任何参数就能创建出一个圆柱体。下面给出了常用的几个属性：属性描述radiusTop可选。此属性定义圆柱体顶部圆半径。默认值是 20radiusBottom可选。此属性定义圆柱体底部圆半径。默认值是 20height原创 2017-12-18 18:27:53 · 7045 阅读 · 0 评论 -
three.js 06-02 之 LatheGeometry 高级几何体
本篇介绍 three.js 中的 LatheGeometry 扫描几何体。它是从一条光滑的曲线开始创建图形，这条曲线是通过指定一些点（也叫节点）来定义的，而这条曲线通常也被称作样条曲线。当这条曲线围绕一个固定点选择时，就构成了一个类似花瓶或铃铛的图形。 先来看看完整的示例，代码如下所示： 示例 06.02 - LatheGeometry原创 2017-12-26 16:47:43 · 1617 阅读 · 1 评论 -
three.js 06-01 之 ConvexGeometry 高级几何体
目前为止，three.js 库中提供的所有的基本几何体部分都已经介绍完了。今天开始我们要介绍 three.js 中提供的一些相对高级且特别的几何体对象，譬如 ConvexGeometry（凸面体）、LathGeometry（扫描体）、TubeGeometry（管状体）、ExtrudeGeometry（拉伸体）、TextGeometry（三维文字）及 ParametricGeometry（等式体）等原创 2017-12-26 13:11:21 · 2378 阅读 · 0 评论 -
three.js 05-09 之 PolyhedronGeometry 几何体
今天是最后一篇介绍 three.js 中常用的基础几何体。本篇将要介绍的是 PolyhedronGeometry 几何体。翻译成中文就叫多面体。多面体是一种只有平面和直边的几何体。多数情况下我们不会使用这种几何体，因为 three.js 库为我们提供了几种特定的多面体，如：TetrahedronGeometry 四面体、OctahedronGeometry 八面体、DodecahedronGeom原创 2017-12-22 12:21:11 · 2506 阅读 · 0 评论 -
three.js 04-07 之 MeshPhongMaterial 材质
上篇我们已经介绍了 three.js 中高级材质中的 MeshLambertMaterial 材质。本篇将要介绍的是另一种与之对应的高级材质 MeshPhongMaterial 材质。通过它可以创建一种光亮表面的材质效果。这种材质的属性基本跟 MeshLambertMaterial 暗淡材质一样，除此之外，我们列出 MeshPhongMaterial 材质中比较感兴趣的特有属性，如下表所示：原创 2017-12-07 11:05:21 · 13376 阅读 · 0 评论 -
three.js 04-06 之 MeshLambertMaterial 材质
关于 three.js 库中的基础材质类型基本上就已经介绍完了。本篇开始介绍 three.js 库中提供的高级材质。例如比较常用的 MeshPhongMaterial 和 MeshLambertMaterial 两种材质。以及另一种最通用，但却最难用的 ShaderMaterial 材质，通过它，你可以创建自己的着色程序、定义材质以及物体如何显示等。 我们先来看看 MeshLambert原创 2017-12-06 18:16:54 · 3181 阅读 · 0 评论 -
three.js 05-03 之 ShapeGeometry 几何体
本篇我们来介绍 ShapeGeometry 几何体。通过前两篇的介绍，我们会发现 PlaneGeometry 和 CircleGeometry 都只有有限的方法来定制他们的外观。如果我们想创建一个自定义的二维图形，那么就只能依靠今天要讲的 ShapeGeometry 了。 为了使用 ShapeGeometry，我们首先需要通过 THREE.Shape 创建一个自定义的基本形状，然后把它作原创 2017-12-14 18:30:02 · 6434 阅读 · 0 评论 -
three.js 05-05 之 SphereGeometry 几何体
本篇将要介绍的 SphereGeometry 球体是 three.js 中较简单的另一种几何体。先看看球体常用的几个属性，如下表所示：属性描述radius可选。此属性定义球体的半径。widthSegments可选。此属性定义球体竖直（维度）方向上的分段数。默认值是 8，最小值是 3heightSegments可选。此属原创 2017-12-15 11:20:24 · 9275 阅读 · 0 评论 -
three.js 06-06 之 Binary Operations 几何体
本篇将要介绍的是在 three.js 中如何使用二元操作来自由组合物体。为此，我们需要引入一个 three.js 的扩展 ThreeBSP.js 库，你可以从网上找到这个库，譬如从 http://download.youkuaiyun.com/download/zhulx_sz/10202730 中下载，这个资源里面提供的这个 ThreeBSP.js 库，已经针对 three.js r8x 进行了小小的修原创 2018-01-12 18:05:10 · 696 阅读 · 1 评论 -
three.js 08-01 之 Group 组合对象
在前面的一些分享中，你会发现有用到过对象组合。例如前面一些分享示例中提到的用THREE.SceneUtils.createMultiMaterialObject(geometry, materials) 函数创建的物体对象，其实就是创建了一个 THREE.Group 组。这个函数创建的组包含多个副本，即针对 materials 材质数组参数的每一个材质，都会创建一个对应的网格并添加到组中，这样的组原创 2018-02-01 11:13:56 · 7607 阅读 · 0 评论 -
three.js 07-01 之 Sprite 粒子系统
前面很长一段时间，我们讨论了 three.js 中最重要的一些概念和相关的 API。今天开始，我们来探索一下 three.js 中一直还未提到的“粒子（particle）”概念。使用粒子可以很容易地创建出很多细小的物体，可以用来模拟雨滴、雪花和火焰等。你也可以将某个单一几何体（例如圆环）渲染成一组粒子，并分别对它们进行控制。 在旧版的 three.js 中可能会有 ParticleSys原创 2018-01-18 12:44:47 · 940 阅读 · 0 评论 -
three.js 09-03 之 Tween 动画
Tween.js 是一个小型的 JavaScript 库，可以从 https://github.com/sole/tween.js 下载。这个库可以用来定义某个属性在两个值之间的过渡，自动计算起始值和结束值之间的所有中间值。这个过程叫 tweening（补间）。例如，你可以用这个库将一个网格 x 轴上的位置在 10 秒钟内从 10 递减到 3，如下代码片段所示：var tween = ne...原创 2018-02-27 15:00:01 · 1053 阅读 · 1 评论 -
three.js 09-02 之 选择对象
我们在讨论相机和动画之前，先来看看对象的选择实现，尽管这个跟动画没有直接的关系，但了解这个实现之后将会是一个很有益的补充。 在给出示例代码之前，我们先来看一下核心代码：function onDocumentMouseDown(event) { event.preventDefault(); mouse.x = (event.clientX / window.innerWidth)...原创 2018-02-26 10:59:41 · 1986 阅读 · 2 评论 -
three.js 08-02 之 网格合并
上一篇文中，我们介绍到利用 THREE.Group 对象可以很容易操纵和管理大量的网格。但是当网格对象的数量非常多时，性能就会成为一个瓶颈。实际上在组里的每个对象还是独立的，需要对它们分别进行处理和渲染。 在旧版 three.js 中，有个叫 THREE.GeometryUtils.merge 函数可以将多个几何体合并起来，创建一个联合体。但是在新版中已经改用 THREE.Geometr原创 2018-02-05 17:29:33 · 1621 阅读 · 0 评论 -
three.js 08-04 之 加载和保存场景
上一篇中我们介绍了在 three.js 中如何保存并加载对象。本篇我再来看看 three.js 如何保存并加载整个场景。其实道理跟保存并加载对象是一样的，只不过保存的不再是某个对象，而是整个场景 THREE.Scene 对象。由于不是很难，因此不再嗷述，下面给出一个完整的示例：<!DOCTYPE html><html><head> <t...原创 2018-02-09 09:23:22 · 2101 阅读 · 0 评论 -
three.js 08-03 之 加载和保存对象
原创 2018-02-08 17:52:37 · 1525 阅读 · 1 评论 -
three.js 07-06 之 Sprite 一幅图片多个精灵
前面谈到通过 THREE.Sprite 创建粒子时，可以通过加载外部图片的方式来格式化粒子。那么，如果一幅图片中包含多种精灵的话，那又该怎么办呢？ 接下来我们就来探讨一下其实现方法，例如咋们有以下图片：一幅图片中包含 5 种精灵 我首先大概来分析一下这张图片，可以看出这张图片一共有 5 种精灵，排列方式是一行平均分布，即每一种精灵在水平方向上（U 方向）都占整幅图片的原创 2018-01-19 15:26:22 · 5736 阅读 · 0 评论 -
three.js 07-05 之 Points 多组粒子系统组合应用
在上一篇的 Points 粒子系统示例中，我们都只是在场景中加入了一组粒子系统。但是，像北方冬天那种大雪纷飞的场景，光用一组粒子系统估计不足以呈现这样的复杂场景。因此，需要将多组粒子系统组合起来才能应付。 下面我们就来介绍一下如何实现，先给出一幅动图直观感受一下其效果，如下所示： 此示例的完整代码如下： 示例 07.01 - Particles原创 2018-01-19 11:04:42 · 691 阅读 · 0 评论 -
three.js 06-05 之 ParametricGeometry 几何体
本篇我们来讨论一下 ParametricGeometry 几何体。通过它我们可以创建基于等式的几何体（类似约等于“≈”形状）。首先，我们看一下其构造函数 ParametricGeometry(function, slices, stacks)，第一个函数是一个用于创建平面的函数，其格式通常如下所示：function plane(u, v) { var x = u * width;原创 2018-01-10 16:37:34 · 2486 阅读 · 0 评论 -
three.js 06-05 之从 SVG 拉伸创建物体
本篇我们来探讨一下在 three.js 中如何从 SVG 拉伸一个图形来创建物体。首先，我们从 https://github.com/asutherland/d3-threeD 获取一个叫 d3-threeD 的小型库，它可以将 SVG 路径转换成 three.js 图形。 下面来看看利用 THREE.ExtrudeGeometry 如何将一个蝙蝠标识符的 SVG 图案转成三维图形，核心原创 2018-01-10 14:53:16 · 1980 阅读 · 4 评论 -
three.js 07-04 之 Points 粒子系统
前面都是在介绍 如何通过 THREE.Sprite 来构建粒子系统。本篇我们来介绍一下如何通过 THREE.Points 及 THREE.PointsMaterial 来构建粒子系统。我们先来看一个完整的示例，代码如下所示： 示例 07.01 - Particles body { /* 设置 margin 为 0原创 2018-01-18 18:35:44 · 1803 阅读 · 0 评论 -
three.js 07-03 之 Sprite 用外部图片格式化粒子
如果读者有读过前一篇博文，那么想改用外部图片来格式化粒子，就会显得轻而易举，非常简单，核心代码就只有这一点点：/** 从一个外部“.png”图片文件加载一幅类似雨滴的纹理图案 */function loadTexture() { var loader = new THREE.TextureLoader(); return loader.load('./assets/textures/pa原创 2018-01-18 16:42:57 · 1193 阅读 · 0 评论 -
three.js 07-02 之 Sprite 用 Canvas 画布格式化粒子
经过前面一篇的介绍，相信大家已经对 three.js 有了一个基本的总体上的认识。但是那么了无生趣的粒子实在难看。本篇就来介绍如何通过 Canvas 画布来格式化 Sprite 粒子。相信读过我上一篇博文的朋友应该记得，SpriteMaterial 属性中有一个叫“map”的属性，它实际上是一个 THREE.Texture 对象。通过这个 THREE.Texture 对象，我们可以利用 Canva原创 2018-01-18 16:25:27 · 1563 阅读 · 0 评论 -
three.js 05-04 之 BoxGeometry 几何体
前面几篇介绍的都是基于二维的平面几何体。今天开始介绍基于三维的几何体，譬如像 BoxGeometry 方块。这是一种非常简单的三维几何体，你只要指定宽度、高度及深度就可以创建出一个方块。下面给出了常用的几个属性：属性描述width必选。此属性定义方块的宽度。即方块沿 x 轴方向的长度height必选。此属性定义方块的高度。即方块沿 y原创 2017-12-15 10:53:49 · 7210 阅读 · 0 评论 -
three.js 04-04 之 MeshFaceMaterial 材质
这一篇将要介绍的内容是如何为物体的每一个面单独指定材质。也许一些老资格的 three.js men 会想到 MeshFaceMaterial 材质。但在新版 three.js 中已经不存在这种材质了，因为原则上来讲，旧版中的 MeshFaceMaterial 材质其实就是一个材质数组。举个例子，加入我们在场景中加入一个立方体，这个立方体上有六个面，你可以通过定义一个长度为六的材质数组来为每一个面单原创 2017-12-06 15:43:06 · 3605 阅读 · 0 评论 -
three.js 04-01 之 MeshBasicMaterial 材质
前面我们用了六篇文章分别介绍了 three.js 中的各种光源。从本篇开始，我们将深入探讨一下 three.js 中各种常用材质。大体有如下表所示几种常用的材质：名称描述MeshBasicMaterial （网格基础材质）基础材质，可以用它赋予几何体一种简单的颜色，或者显示几何体的线框MeshDepthMaterial （网格深度材质）原创 2017-11-24 18:00:15 · 6687 阅读 · 0 评论 -
three.js 03-03 之 SpotLight 光源
这一篇我们来简单介绍一下 SpotLight 光源。如果你已经看过我前几篇关于灯光方面的介绍，相信你对灯光应该有了一定的认识了。在 three.js 中，SpotLight（聚光灯光源）大概会是最常用的一种光源，尤其是当想要生成阴影时。SpotLight 光源有一种雏形效果，类似我们生活中的手电筒或者灯笼。下面我先来看看聚光灯不同于点光源的几个额外属性，如下表所示：属性描述原创 2017-11-14 12:06:44 · 1078 阅读 · 0 评论 -
three.js 03-02 之 PointLight 光源
前一篇，我们对 AmbientLight 环境光做了一个简单的介绍。本篇我们来介绍 three.js 中的另一种光源 PointLight（点光源）。照例我们先来一个完整示例： 示例 03.02 - 点光源 body { /* 设置 margin 为 0，并且 overflow 为 hidden，来完成页面样式原创 2017-11-09 17:51:00 · 1833 阅读 · 0 评论 -
three.js 02-05 之相机
前一篇我们介绍了 Three.js 中 Mesh 网格对象的一些常用函数及属性。本篇我们将介绍 Three.js 中有关相机的概念，照例我们先上一个完整的示例，代码如下： 示例 02.05 - 相机 body { /* 设置 margin 为 0，并且 overflow 为 hidden，来完成页面样式 */原创 2017-11-06 17:14:23 · 520 阅读 · 0 评论 -
three.js 02-04 之网格对象函数及属性
上一篇中，我们对自定义几何体的相关知识做了一个简单介绍，并讲解了如何克隆（复制）一个几何体。本篇我们要介绍的是关于 Mesh 网格对象常用的一些相关函数和属性。照例，我们先上一个网站的示例，代码如下： 示例 02.02 - 使用几何及网格对象 body { /* 设置 margin 为 0，并且 ov原创 2017-11-05 15:21:13 · 686 阅读 · 0 评论 -
three.js 02-02 之使用几何与网格对象
上一篇我们对场景 Scene 对象进行了单独讲解。本篇我们将来看看 Three.js 中的几个标准的几何体的用法。我们先上一段完整的代码，如下所示： 示例 02.02 - 使用几何及网格对象 body { /* 设置 margin 为 0，并且 overflow 为 hidden，来完成页面样式 */原创 2017-11-02 15:35:50 · 763 阅读 · 0 评论 -
three.js 02-01 之场景基本功能
相信大家通过之前一系列的学习，对 Three.js 都应该有了相当感性认识。那么从本篇开始，我们将逐个逐个功能点展开来讲解，接下来我们首先要展开讲的就是场景 THREE.Scene 对象。从前几篇文中不难看出，一个场景想要显示任何东西，均需要三种类型的组件，即：组件描述相机 Camera决定哪些东西将要在屏幕上渲染光源 Light它们原创 2017-11-01 16:02:38 · 494 阅读 · 0 评论 -
three.js 01-06 之使用 ASCII 效果
在上一篇中，我们讲到了如何使用 dat.GUI 来简化我们的 Three.js 试验。本篇我将介绍 Three.js 中的一种几乎没啥用的 ASCII 效果，但却可以很好地向我们展示扩展 Three.js 是多么的容易，也足以说明 Three.js 的模块化的实现好处。 为了实现所谓的 ASCII 效果，我们需要引入另一个 JavaScript 库即 AsciiEffect.js 库，它原创 2017-10-28 15:20:22 · 1182 阅读 · 0 评论 -
three.js 01-05 之使用 dat.GUI 库简化试验
在上一篇文中，我们已经学习了如何利用 Three.js 实现简单的动画，譬如旋转我们的立方体、让我们的球体弹跳等。但是，如果我想控制一下立方体的旋转速度，或者调整一下球体的弹跳速度，改怎么做呢？这个时候，相信大部分学者都会很自然的想到传统的方式，即添加几个 html 元素，然后编写相关的 JavaScript 以达到试验目的··· 当然，那样做自然是没什么问题。但是，本文将介绍一种更便捷原创 2017-10-26 18:06:33 · 973 阅读 · 0 评论 -
three.js 01-04 之简单动画
如果要在场景中加入动画，那么就要找到一种可以使得场景能在一定的时间间隔就能进行一次渲染的办法。通常人们都会想到传统的 setInterval(function, interval) 方法，譬如通过这个方法我们可以指定每 100 毫秒调用一次渲染器进行场景渲染。但这个方法的问题是它并不会考虑浏览器中发生的事情，如果你正在浏览其他页面，那这个方法依然会每隔一定时间间隔就调用一次。而且这个方法也没有跟显原创 2017-10-26 10:47:43 · 844 阅读 · 0 评论