2017年12月_zhulx_sz

12月 11月 10月

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

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

2017-12-28 11:47:52 3539

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

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

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

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

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

2017-12-26 16:47:43 1548 1

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

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

2017-12-26 13:11:21 2309

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

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

2017-12-22 12:21:11 2419

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

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

2017-12-22 09:32:44 1415

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

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

2017-12-20 10:09:14 1312

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

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

2017-12-18 18:27:53 6918

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

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

2017-12-15 11:20:24 9154

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

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

2017-12-15 10:53:49 7086

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

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

2017-12-14 18:30:02 6328

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

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

2017-12-14 10:14:49 1705

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

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

2017-12-14 09:55:01 8807

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

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

2017-12-12 16:00:52 2888

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

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

2017-12-11 18:18:45 4989

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

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

2017-12-08 12:39:06 9579

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

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

2017-12-07 11:05:21 13249

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

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

2017-12-06 18:16:54 3110

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

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

2017-12-06 15:43:06 3525

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

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

2017-12-06 14:26:22 3687

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

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

2017-12-05 15:21:10 794

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

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

2017-12-05 11:37:35 735

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 的博客