自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

zhulx_sz 的博客

为了家人,努力赚钱~

  • 博客(10)
  • 资源 (5)
  • 问答 (1)
  • 收藏
  • 关注

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

ThreeBSP.js 库

three.js布尔运算库,采用ThreeBSP.coffee编译而成,解决了它和Threejs r8x兼容性的若干问题。并且消除了警告信息。

2018-01-12

libgdx 1.5.6 API CHM 版

libgdx 1.5.6 API CHM 版 英文

2016-06-20

ORMLite 官方中文手册

ORMLite 官方手册,需要的朋友可以拿来参考~

2016-06-01

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除