2017年11月_zhulx_sz

12月 11月 10月

原创 three.js 04-01 之 MeshBasicMaterial 材质

前面我们用了六篇文章分别介绍了 three.js 中的各种光源。从本篇开始，我们将深入探讨一下 three.js 中各种常用材质。大体有如下表所示几种常用的材质：名称描述MeshBasicMaterial （网格基础材质）基础材质，可以用它赋予几何体一种简单的颜色，或者显示几何体的线框MeshDepthMaterial （网格深度材质）

2017-11-24 18:00:15 6491

原创 three.js 03-07 之 LensFlare 眩光

本篇将要介绍 three.js 中最后一种光源 LensFlare 镜头眩光。所谓镜头眩光，当你直接对着太阳拍照时就会产生镜头眩光现象。当然，对于拍照来说多数情况下应尽量避免此种情形，但是对于游戏和一些三维场景来说，这也是一种很好的光源效果，让场景看起来更加真实。我们先来看看本篇将要完成的一个例子的效果图，如下所示：在这个场景中，我们可以看到在草地上方有一个类似太阳的光源，

2017-11-22 11:59:53 1033

原创 three.js 03-06 之 RectAreaLight 光源

上篇我们介绍了 three.js 中比较特殊的 HemisphereLight 半球光光源。本篇我们将介绍另一种比较特殊的光源 RectAreaLight 平面光光源。这种光源可以定义一个发光的矩形，我们姑且先把它理解成一面会反光的镜面。在旧版本中，这种光源并不在标准 three.js 库中，而是在它的扩展库中，而且名称也不同叫 AreaLight。但是新版已经包含在标准库中了。所以对于旧版的用法

2017-11-21 12:37:05 723

原创 three.js 03-05 之 HemisphereLight 光源

在前四篇文中，我们介绍了 three.js 中常用的四种基础光源 AmbientLight（环境光光源）、PointLight（点光光源）、SpotLight（聚光灯光源）以及 DirectionalLight（方向光或叫平行光光源）。本篇我们将来介绍一下 three.js 中第一种相对特殊点的光源 HemisphereLight（半球光光源）。这种光源可以为室外场景创建更加贴近自然的光照效果。

2017-11-21 11:48:05 1200

原创 three.js 03-04 之 DirectionalLight 光源

这一篇我们来看看剩下的最后一个基础光源 DirectionalLight （方向光或叫平行光）光源。这个光源可以看做是距离很远很远的光源，就像太阳。太阳离我们是如此的遥远，以至于所有的光线到达地球时都成了相互平行的光线了。方向光跟聚光灯光源之间的主要差别是：方向光不像聚光灯那样离目标越远越暗淡，被方向光光源照亮的整个区域接收到的光的强度是一样的。下面来看一个完整的示例，代码如下所示：

2017-11-15 16:40:22 897

原创 three.js 03-03 之 SpotLight 光源

这一篇我们来简单介绍一下 SpotLight 光源。如果你已经看过我前几篇关于灯光方面的介绍，相信你对灯光应该有了一定的认识了。在 three.js 中，SpotLight（聚光灯光源）大概会是最常用的一种光源，尤其是当想要生成阴影时。SpotLight 光源有一种雏形效果，类似我们生活中的手电筒或者灯笼。下面我先来看看聚光灯不同于点光源的几个额外属性，如下表所示：属性描述

2017-11-14 12:06:44 984

原创 three.js 03-02 之 PointLight 光源

前一篇，我们对 AmbientLight 环境光做了一个简单的介绍。本篇我们来介绍 three.js 中的另一种光源 PointLight（点光源）。照例我们先来一个完整示例：示例 03.02 - 点光源 body { /* 设置 margin 为 0，并且 overflow 为 hidden，来完成页面样式

2017-11-09 17:51:00 1749

原创 three.js 03-01 之 AmbientLight 光源

在前面的一些文章里我们深入地学习了场景中最重要的部分：几何体、网格和相机。尽管其中有的示例可能用到了光源，但是没有过多解释。接下来的一些文章里，我们将会重点讲解一些在 three.js 中常用的几种光源。在 three.js 中，如果没有光源，我们就看不到任何渲染结果。为此，three.js 为我们准备了多种不同用途的光源，如下表所示：光源名称描述

2017-11-08 16:13:46 910

原创 three.js 02-05 之相机

前一篇我们介绍了 Three.js 中 Mesh 网格对象的一些常用函数及属性。本篇我们将介绍 Three.js 中有关相机的概念，照例我们先上一个完整的示例，代码如下：示例 02.05 - 相机 body { /* 设置 margin 为 0，并且 overflow 为 hidden，来完成页面样式 */

2017-11-06 17:14:23 446

原创 three.js 02-04 之网格对象函数及属性

上一篇中，我们对自定义几何体的相关知识做了一个简单介绍，并讲解了如何克隆（复制）一个几何体。本篇我们要介绍的是关于 Mesh 网格对象常用的一些相关函数和属性。照例，我们先上一个网站的示例，代码如下：示例 02.02 - 使用几何及网格对象 body { /* 设置 margin 为 0，并且 ov

2017-11-05 15:21:13 611

原创 three.js 02-03 之自定义形状

上一篇，我们已经学习了如何使用 Three.js 提供的几种常用的几何对象及网格。今天，我们来重点学习一下，如何通过自定义顶点和面来构建自己的几何体，并用它来创建网格。我们先来一个完整的例子，代码如下：示例 02.02 - 使用几何及网格对象 body { /* 设置 margin 为 0，并且 o

2017-11-03 16:46:04 3243 1

原创 three.js 02-02 之使用几何与网格对象

上一篇我们对场景 Scene 对象进行了单独讲解。本篇我们将来看看 Three.js 中的几个标准的几何体的用法。我们先上一段完整的代码，如下所示：示例 02.02 - 使用几何及网格对象 body { /* 设置 margin 为 0，并且 overflow 为 hidden，来完成页面样式 */

2017-11-02 15:35:50 699

原创 three.js 02-01 之场景基本功能

相信大家通过之前一系列的学习，对 Three.js 都应该有了相当感性认识。那么从本篇开始，我们将逐个逐个功能点展开来讲解，接下来我们首先要展开讲的就是场景 THREE.Scene 对象。从前几篇文中不难看出，一个场景想要显示任何东西，均需要三种类型的组件，即：组件描述相机 Camera决定哪些东西将要在屏幕上渲染光源 Light它们

2017-11-01 16:02:38 437

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