- 博客(10)
- 资源 (5)
- 问答 (1)
- 收藏
- 关注
原创 three.js 07-06 之 Sprite 一幅图片多个精灵
前面谈到通过 THREE.Sprite 创建粒子时,可以通过加载外部图片的方式来格式化粒子。那么,如果一幅图片中包含多种精灵的话,那又该怎么办呢? 接下来我们就来探讨一下其实现方法,例如咋们有以下图片:一幅图片中包含 5 种精灵 我首先大概来分析一下这张图片,可以看出这张图片一共有 5 种精灵,排列方式是一行平均分布,即每一种精灵在水平方向上(U 方向)都占整幅图片的
2018-01-19 15:26:22 5626
原创 three.js 07-05 之 Points 多组粒子系统组合应用
在上一篇的 Points 粒子系统示例中,我们都只是在场景中加入了一组粒子系统。但是,像北方冬天那种大雪纷飞的场景,光用一组粒子系统估计不足以呈现这样的复杂场景。因此,需要将多组粒子系统组合起来才能应付。 下面我们就来介绍一下如何实现,先给出一幅动图直观感受一下其效果,如下所示: 此示例的完整代码如下: 示例 07.01 - Particles
2018-01-19 11:04:42 657
原创 three.js 07-04 之 Points 粒子系统
前面都是在介绍 如何通过 THREE.Sprite 来构建粒子系统。本篇我们来介绍一下如何通过 THREE.Points 及 THREE.PointsMaterial 来构建粒子系统。我们先来看一个完整的示例,代码如下所示: 示例 07.01 - Particles body { /* 设置 margin 为 0
2018-01-18 18:35:44 1750
原创 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 1166
原创 three.js 07-02 之 Sprite 用 Canvas 画布格式化粒子
经过前面一篇的介绍,相信大家已经对 three.js 有了一个基本的总体上的认识。但是那么了无生趣的粒子实在难看。本篇就来介绍如何通过 Canvas 画布来格式化 Sprite 粒子。相信读过我上一篇博文的朋友应该记得,SpriteMaterial 属性中有一个叫“map”的属性,它实际上是一个 THREE.Texture 对象。通过这个 THREE.Texture 对象,我们可以利用 Canva
2018-01-18 16:25:27 1519
原创 three.js 07-01 之 Sprite 粒子系统
前面很长一段时间,我们讨论了 three.js 中最重要的一些概念和相关的 API。今天开始,我们来探索一下 three.js 中一直还未提到的“粒子(particle)”概念。使用粒子可以很容易地创建出很多细小的物体,可以用来模拟雨滴、雪花和火焰等。你也可以将某个单一几何体(例如圆环)渲染成一组粒子,并分别对它们进行控制。 在旧版的 three.js 中可能会有 ParticleSys
2018-01-18 12:44:47 885
原创 three.js 06-06 之 Binary Operations 几何体
本篇将要介绍的是在 three.js 中如何使用二元操作来自由组合物体。为此,我们需要引入一个 three.js 的扩展 ThreeBSP.js 库,你可以从网上找到这个库,譬如从 http://download.csdn.net/download/zhulx_sz/10202730 中下载,这个资源里面提供的这个 ThreeBSP.js 库,已经针对 three.js r8x 进行了小小的修
2018-01-12 18:05:10 643 1
原创 three.js 06-06 之 TextGeometry 几何体
今天我们来看看在 three.js 中,如何快速的创建三维文本效果。在 three.js 中渲染文本非常简单,你所要做的只是指定想用的字体,以及基本的拉伸属性(基本上就是 ExtrudeGeometry 上提到的那些属性,极个别的除外)。我们先看看具体都有哪些属性,如下表所示:属性描述font可选。此属性指定要用的字体,它是一个 THREE.Font
2018-01-11 12:39:22 1532
原创 three.js 06-05 之 ParametricGeometry 几何体
本篇我们来讨论一下 ParametricGeometry 几何体。通过它我们可以创建基于等式的几何体(类似约等于“≈”形状)。首先,我们看一下其构造函数 ParametricGeometry(function, slices, stacks),第一个函数是一个用于创建平面的函数,其格式通常如下所示:function plane(u, v) { var x = u * width;
2018-01-10 16:37:34 2399
原创 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 1923 4
spin.js 库(超棒讲解)
2018-01-12
xheditor 使用问题
2012-07-18
TA创建的收藏夹 TA关注的收藏夹
TA关注的人