2018年01月_zhulx_sz

02月 01月

原创 three.js 07-06 之 Sprite 一幅图片多个精灵

前面谈到通过 THREE.Sprite 创建粒子时，可以通过加载外部图片的方式来格式化粒子。那么，如果一幅图片中包含多种精灵的话，那又该怎么办呢？接下来我们就来探讨一下其实现方法，例如咋们有以下图片：一幅图片中包含 5 种精灵我首先大概来分析一下这张图片，可以看出这张图片一共有 5 种精灵，排列方式是一行平均分布，即每一种精灵在水平方向上（U 方向）都占整幅图片的

2018-01-19 15:26:22 5625

原创 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 1748

原创 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 1164

原创 three.js 07-02 之 Sprite 用 Canvas 画布格式化粒子

经过前面一篇的介绍，相信大家已经对 three.js 有了一个基本的总体上的认识。但是那么了无生趣的粒子实在难看。本篇就来介绍如何通过 Canvas 画布来格式化 Sprite 粒子。相信读过我上一篇博文的朋友应该记得，SpriteMaterial 属性中有一个叫“map”的属性，它实际上是一个 THREE.Texture 对象。通过这个 THREE.Texture 对象，我们可以利用 Canva

2018-01-18 16:25:27 1516

原创 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 642 1

原创 three.js 06-06 之 TextGeometry 几何体

今天我们来看看在 three.js 中，如何快速的创建三维文本效果。在 three.js 中渲染文本非常简单，你所要做的只是指定想用的字体，以及基本的拉伸属性（基本上就是 ExtrudeGeometry 上提到的那些属性，极个别的除外）。我们先看看具体都有哪些属性，如下表所示：属性描述font可选。此属性指定要用的字体，它是一个 THREE.Font

2018-01-11 12:39:22 1527

原创 three.js 06-05 之 ParametricGeometry 几何体

本篇我们来讨论一下 ParametricGeometry 几何体。通过它我们可以创建基于等式的几何体（类似约等于“≈”形状）。首先，我们看一下其构造函数 ParametricGeometry(function, slices, stacks)，第一个函数是一个用于创建平面的函数，其格式通常如下所示：function plane(u, v) { var x = u * width;

2018-01-10 16:37:34 2398

原创 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 1922 4

docker 操作使用手册

随着目前大家对微服务的推崇，docker 无疑是大行其道的最佳选择，本手册绝对能帮上你忙~

2018-04-12

spin.js 库（超棒讲解）

一个 JavaScript 的提示用户等待的提示库，大致用法如下： /** 显示等待画面 */ function showSpinner() { var opts = { lines: 13, // The number of lines to draw length: 20, // The length of each line width: 10, // The line thickness radius: 30, // The radius of the inner circle corners: 1, // Corner roundness (0..1) rotate: 0, // The rotation offset direction: 1, // 1: clockwise, -1: counterclockwise color: '#000', // #rgb or #rrggbb or array of colors speed: 1, // Rounds per second trail: 60, // Afterglow percentage shadow: false, // Whether to render a shadow hwaccel: false, // Whether to use hardware acceleration className: 'spinner', // The CSS class to assign to the spinner zIndex: 2e9, // The z-index (defaults to 2000000000) top: 'auto', // Top position relative to parent in px left: 'auto' // Left position relative to parent in px }; var target = $('#webgl-output')[0]; //var target = document.getElementById('webgl-output'); spinner = new Spinner(opts).spin(target); return spinner; } /** 隐藏等待画面 */ function hideSpinner(spinner) { spinner.stop(); }

2018-01-12

TA关注的人

zhulx_sz 的博客