zhulx_sz-优快云博客

原创 Ubuntu 18.04 LTS ulimit 修改不生效的问题

玩过 Ubuntu Linux 系统的人都知道，更改系统的 open files 最大限制，一般都是通过以下方法来做：第一步：打开终端并敲入以下命令以打开一个配置文件$: sudo gedit /etc/security/limits.conf第二步：在打开的文件中增加以下几行配置并保存关闭......* soft nofile 65536* hard nofile...

2019-03-08 10:07:06 11560 7

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

原创 three.js 09-02 之选择对象

我们在讨论相机和动画之前，先来看看对象的选择实现，尽管这个跟动画没有直接的关系，但了解这个实现之后将会是一个很有益的补充。在给出示例代码之前，我们先来看一下核心代码：function onDocumentMouseDown(event) { event.preventDefault(); mouse.x = (event.clientX / window.innerWidth)...

2018-02-26 10:59:41 1981

原创 three.js 09-01 之简单动画

到目前为止，我们已经看到过一些简单的动画，他们都不太复杂。我们在刚开始的几篇博文中就引入一个基础的渲染循环，在随后的一些博文中我们使用这个循环简单地旋转对象，并展示了其他几个基础的动画概念。从本篇开始，我们将进一步来介绍 three.js 是如何支持动画操作的。我们将会一起来讨论以下四个主题：基础动画：three.js 里所有动画的基础，修改对象的三个属性，即位置、旋转和缩放；移动...

2018-02-10 21:30:33 544

原创 three.js 08-04 之加载和保存场景

上一篇中我们介绍了在 three.js 中如何保存并加载对象。本篇我再来看看 three.js 如何保存并加载整个场景。其实道理跟保存并加载对象是一样的，只不过保存的不再是某个对象，而是整个场景 THREE.Scene 对象。由于不是很难，因此不再嗷述，下面给出一个完整的示例：<!DOCTYPE html><html><head> <t...

2018-02-09 09:23:22 2097

原创 three.js 08-02 之网格合并

上一篇文中，我们介绍到利用 THREE.Group 对象可以很容易操纵和管理大量的网格。但是当网格对象的数量非常多时，性能就会成为一个瓶颈。实际上在组里的每个对象还是独立的，需要对它们分别进行处理和渲染。在旧版 three.js 中，有个叫 THREE.GeometryUtils.merge 函数可以将多个几何体合并起来，创建一个联合体。但是在新版中已经改用 THREE.Geometr

2018-02-05 17:29:33 1618

原创 three.js 08-01 之 Group 组合对象

在前面的一些分享中，你会发现有用到过对象组合。例如前面一些分享示例中提到的用THREE.SceneUtils.createMultiMaterialObject(geometry, materials) 函数创建的物体对象，其实就是创建了一个 THREE.Group 组。这个函数创建的组包含多个副本，即针对 materials 材质数组参数的每一个材质，都会创建一个对应的网格并添加到组中，这样的组

2018-02-01 11:13:56 7600

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

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

2018-01-19 15:26:22 5729

原创 three.js 07-05 之 Points 多组粒子系统组合应用

在上一篇的 Points 粒子系统示例中，我们都只是在场景中加入了一组粒子系统。但是，像北方冬天那种大雪纷飞的场景，光用一组粒子系统估计不足以呈现这样的复杂场景。因此，需要将多组粒子系统组合起来才能应付。下面我们就来介绍一下如何实现，先给出一幅动图直观感受一下其效果，如下所示：此示例的完整代码如下：示例 07.01 - Particles

2018-01-19 11:04:42 688

原创 three.js 07-04 之 Points 粒子系统

前面都是在介绍如何通过 THREE.Sprite 来构建粒子系统。本篇我们来介绍一下如何通过 THREE.Points 及 THREE.PointsMaterial 来构建粒子系统。我们先来看一个完整的示例，代码如下所示：示例 07.01 - Particles body { /* 设置 margin 为 0

2018-01-18 18:35:44 1798

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

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

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

2018-01-18 16:25:27 1560

原创 three.js 07-01 之 Sprite 粒子系统

前面很长一段时间，我们讨论了 three.js 中最重要的一些概念和相关的 API。今天开始，我们来探索一下 three.js 中一直还未提到的“粒子（particle）”概念。使用粒子可以很容易地创建出很多细小的物体，可以用来模拟雨滴、雪花和火焰等。你也可以将某个单一几何体（例如圆环）渲染成一组粒子，并分别对它们进行控制。在旧版的 three.js 中可能会有 ParticleSys

2018-01-18 12:44:47 937

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

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

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

2018-01-11 12:39:22 1628

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

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

2018-01-10 16:37:34 2476

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

原创 three.js 06-04 之 TubeGeometry 高级几何体

今天将要介绍的是 three.js 库中的 TubeGeometry 高级几何体。它将沿着一条三维样条曲线拉伸出一根管子。你可以通过顶点来定义路径，然后利用 TubeGeometry 来创建这根管子。我们接下来的例子中，将会随机生成一些点，然后利用这些点来生成一根管道。大概思路就如下：我们首先生成一组类型为 THREE.Vector3 的顶点。然后再使用这些点创建管道之前，我们先要把这些点

2017-12-28 11:47:52 3598

原创 three.js 06-03 之 ExtrudeGeometry 高级几何体

本篇介绍 three.js 中的 ExtrudeGeometry 拉伸几何体。它是从一个二维图形创建出一个三维图形。譬如，我们可以先通过 THREE.Shap 对象，先创建一个二维的图形，然后通过 ExtrudeGeometry 将它拉伸为一个三维图形。也可以先通过 THREE.PlaneGeometry 对象创建一个二维平面，然后再利用 ExtrudeGeometry 进行拉伸。关于 Extru

2017-12-27 17:39:09 6191 1

原创 three.js 06-02 之 LatheGeometry 高级几何体

本篇介绍 three.js 中的 LatheGeometry 扫描几何体。它是从一条光滑的曲线开始创建图形，这条曲线是通过指定一些点（也叫节点）来定义的，而这条曲线通常也被称作样条曲线。当这条曲线围绕一个固定点选择时，就构成了一个类似花瓶或铃铛的图形。先来看看完整的示例，代码如下所示：示例 06.02 - LatheGeometry

2017-12-26 16:47:43 1615

原创 three.js 06-01 之 ConvexGeometry 高级几何体

目前为止，three.js 库中提供的所有的基本几何体部分都已经介绍完了。今天开始我们要介绍 three.js 中提供的一些相对高级且特别的几何体对象，譬如 ConvexGeometry（凸面体）、LathGeometry（扫描体）、TubeGeometry（管状体）、ExtrudeGeometry（拉伸体）、TextGeometry（三维文字）及 ParametricGeometry（等式体）等

2017-12-26 13:11:21 2374

原创 three.js 05-09 之 PolyhedronGeometry 几何体

今天是最后一篇介绍 three.js 中常用的基础几何体。本篇将要介绍的是 PolyhedronGeometry 几何体。翻译成中文就叫多面体。多面体是一种只有平面和直边的几何体。多数情况下我们不会使用这种几何体，因为 three.js 库为我们提供了几种特定的多面体，如：TetrahedronGeometry 四面体、OctahedronGeometry 八面体、DodecahedronGeom

2017-12-22 12:21:11 2501

原创 three.js 05-08 之 TorusKnotGeometry 几何体

本篇将要介绍 TorusKnotGeometry 几何体。翻译成中文叫环面扭结。这是一种比较特别的扭结，样子就像是一根管子绕着它自己转了几圈。我们还是先来看看它的几个常用的属性吧，如下表所示：属性描述radius可选。此属性定义整个圆环的半径。默认值是 1tube可选。此属性定义管子的直径。默认值是 0.4radialSegm

2017-12-22 09:32:44 1457

原创 three.js 05-07 之 TorusGeometry 几何体

今天将要介绍的是 TorusGeometry 几何体。这也是一种非常简单的三维几何体，你甚至不需要指定任何参数就能创建出一个圆环（像甜甜圈）。下面给出了常用的几个属性：属性描述radius可选。此属性定义圆环的半径尺寸。默认值是 100tube可选。此属性定义圆环的管子半径。默认值是 40radialSegments可

2017-12-20 10:09:14 1393

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

今天将要介绍的是 CylinderGeometry 几何体。这也是一种非常简单的三维几何体，你甚至不需要指定任何参数就能创建出一个圆柱体。下面给出了常用的几个属性：属性描述radiusTop可选。此属性定义圆柱体顶部圆半径。默认值是 20radiusBottom可选。此属性定义圆柱体底部圆半径。默认值是 20height

2017-12-18 18:27:53 7041

原创 three.js 05-05 之 SphereGeometry 几何体

本篇将要介绍的 SphereGeometry 球体是 three.js 中较简单的另一种几何体。先看看球体常用的几个属性，如下表所示：属性描述radius可选。此属性定义球体的半径。widthSegments可选。此属性定义球体竖直（维度）方向上的分段数。默认值是 8，最小值是 3heightSegments可选。此属

2017-12-15 11:20:24 9266

原创 three.js 05-04 之 BoxGeometry 几何体

前面几篇介绍的都是基于二维的平面几何体。今天开始介绍基于三维的几何体，譬如像 BoxGeometry 方块。这是一种非常简单的三维几何体，你只要指定宽度、高度及深度就可以创建出一个方块。下面给出了常用的几个属性：属性描述width必选。此属性定义方块的宽度。即方块沿 x 轴方向的长度height必选。此属性定义方块的高度。即方块沿 y

2017-12-15 10:53:49 7203

原创 three.js 05-03 之 ShapeGeometry 几何体

本篇我们来介绍 ShapeGeometry 几何体。通过前两篇的介绍，我们会发现 PlaneGeometry 和 CircleGeometry 都只有有限的方法来定制他们的外观。如果我们想创建一个自定义的二维图形，那么就只能依靠今天要讲的 ShapeGeometry 了。为了使用 ShapeGeometry，我们首先需要通过 THREE.Shape 创建一个自定义的基本形状，然后把它作

2017-12-14 18:30:02 6432

原创 three.js 05-02 之 CircleGeometry 几何体

本篇我们来介绍 CircleGeometry 几何体，其常用属性如下表所示：属性描述radius （半径）必选。此属性指定圆的半径segments （分段）可选。此属性定义创建圆所用的面数量。最少3个，默认为8个。值越大，圆就越光滑thetaStart （起始角）可选。此属性定义从哪儿开始画圆。取值范围 0~2*π

2017-12-14 10:14:49 1764

原创 three.js 05-01 之 PlaneGeometry 几何体

three.js 库中的材质就已经基本上介绍完了。本篇开始我们将逐个深入 three.js 中各种几何体的细节。在 three.js 中，常用的几何体包括：二维几何体：PlaneGeometry 平面CircleGeometry 圆形ShapeGeometry 塑形三维几何体：BoxGeometry 立方体（或叫三维方块）SphereGeometry 球体Cylinde

2017-12-14 09:55:01 8919

原创 three.js 04-10 之 LineDashedMaterial 材质

本篇介绍的 LineDashedMaterial 材质跟上一篇 LineBasicMaterial 材质基本一样，只不过 LineDashedMaterial 材质的线型是虚线而已。除了跟 LineBasicMaterial 拥有相同的属性外，它还有以下几个独特的属性：属性描述scale （缩放比例）缩放 dashSize 和 gapSize。如果

2017-12-12 16:00:52 2990

原创 three.js 04-09 之 LineBasicMaterial 材质

关于 three.js 中的材质部分介绍就快讲完了。接下来要介绍关于线段几何的两种材质：LineBasicMaterial 和 LineDashedMatertial。如下所示：LineBasicMaterial：通过线段基础材质，可以设置线段的颜色、宽度、断点及连接点等属性；LineDashedMaterial：跟 LineBasicMaterial 基本一样，但是通过指定短划线和间

2017-12-11 18:18:45 5129

原创 three.js 04-08 之 ShaderMaterial 材质

今天我们将要介绍的高级材质叫 THREE.ShaderMaterial （我把它翻译成自定义着色器材质）。它是 three.js 库中功能最为丰富、也是最为复杂的一种高级材质。通过它，可以定义自己的着色器，直接在 WebGL 环境中运行。着色器可以将 three.js 中的 JavaScript 对象转换为屏幕上的像素。通过这些自定义的着色器，你可以明确指定你的对象如何渲染及遮盖，或者修改 thr

2017-12-08 12:39:06 9683

原创 three.js 04-07 之 MeshPhongMaterial 材质

上篇我们已经介绍了 three.js 中高级材质中的 MeshLambertMaterial 材质。本篇将要介绍的是另一种与之对应的高级材质 MeshPhongMaterial 材质。通过它可以创建一种光亮表面的材质效果。这种材质的属性基本跟 MeshLambertMaterial 暗淡材质一样，除此之外，我们列出 MeshPhongMaterial 材质中比较感兴趣的特有属性，如下表所示：

2017-12-07 11:05:21 13369

原创 three.js 04-06 之 MeshLambertMaterial 材质

关于 three.js 库中的基础材质类型基本上就已经介绍完了。本篇开始介绍 three.js 库中提供的高级材质。例如比较常用的 MeshPhongMaterial 和 MeshLambertMaterial 两种材质。以及另一种最通用，但却最难用的 ShaderMaterial 材质，通过它，你可以创建自己的着色程序、定义材质以及物体如何显示等。我们先来看看 MeshLambert

2017-12-06 18:16:54 3176

原创 three.js 04-04 之 MeshFaceMaterial 材质

这一篇将要介绍的内容是如何为物体的每一个面单独指定材质。也许一些老资格的 three.js men 会想到 MeshFaceMaterial 材质。但在新版 three.js 中已经不存在这种材质了，因为原则上来讲，旧版中的 MeshFaceMaterial 材质其实就是一个材质数组。举个例子，加入我们在场景中加入一个立方体，这个立方体上有六个面，你可以通过定义一个长度为六的材质数组来为每一个面单

2017-12-06 15:43:06 3596

原创 three.js 04-04 之 MeshNormalMaterial 材质

本篇将要介绍的这个 MeshNormalMaterial 网格法向量材质，是一种比较特殊的材质。它使得物体的每一个面的颜色都从该面向外指的法向量计算得到的。所谓法向量是指与面垂直的向量。法向量在 three.js 库中有着广泛的应用。它可以用来决定光的反射方向，在三维物体上映射材质时起到辅助作用。还可以在计算光照、阴影时提供有用信息，从而为物体表面像素上色。想要理解 MeshNorma

2017-12-06 14:26:22 3789

原创 three.js 04-03 之联合材质

在上一篇介绍基于深度着色的 MeshDepthMaterial 材质时，提到可以将它与其他材质组合使用，从而可以创建出逐渐消失的效果。本篇就是要介绍这种用法，我们称之为联合材质。这个很好理解，举个例子，假设我们在前一篇示例的基础上，把逐渐消失的效果改成为，越近的地方月暗，越远的地方越绿（而不是简单的越亮），该如何办到呢？其实，要达到这个效果，并不难。步骤大概如下：首先，我们需要创建两种

2017-12-05 15:21:10 840

原创 three.js 04-02 之 MeshDepthMaterial 材质

首先要向大家说声抱歉！自上篇我们介绍了 MeshBasicMaterial 材质，到本篇将要介绍的 MeshDepthMaterial 已经过去一周有余了。本来计划是想坚持每周一到两篇的，但是有时候确实身不由己，公司的项目有时候需要冲刺给耽误了，还请读者们谅解！言归正传，今天我们介绍的这个 MeshDepthMaterial 材质，特点是其外观不是由光照或某个材质属性决定的；而是由物体

2017-12-05 11:37:35 769

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关注的人

docker 操作使用手册

spin.js 库（超棒讲解）

ThreeBSP.js 库

libgdx 1.5.6 API CHM 版

ORMLite 官方中文手册

xheditor 使用问题