摘要:郭先生发现在开始学习three.js着色器材质时,我们经常会无从下手,辛苦写下的着色器,也会因莫名的报错而手足无措。原因是着色器材质它涉及到另一种语言–GLSL,只有懂了这个语言,我们才能更好的写出着色器材质,利用好的我们的GPU。这篇说一说glsl内置函数。 1. 和角度相关的函数 下面是一个和角 阅读全文
posted @ 2020-08-04 09:27 郭先生的博客 阅读(123) 评论(0) 推荐(1) 编辑
摘要:说起three.js,着色器材质总是绕不过的话题,今天郭先生就说一说什么是着色器材质。着色器材质是很需要灵感和数学知识的,可以用简短的代码和绘制出十分丰富的图像,可以说着色器材质是脱离three.js的另一块知识,因此它十分难讲,我们只能在一个一个案例中逐渐掌握着色器语言的使用技巧。 1. 什么是着 阅读全文
posted @ 2020-08-03 09:06 郭先生的博客 阅读(168) 评论(2) 推荐(1) 编辑
摘要:上一篇说了一下自制骨骼动画,这一篇郭先生使用帧动画让骨骼动画动起来。帧动画是一套比较完善的动画剪辑方法,详细我的api我们就不多说了,网上有很多例子,自行查找学习。在线案例请点击博客原文。话不多说先上图。 1. 初始化一些四元数 首先我们需要一些四元数,因为我们的动画里有很多旋转并且帧动画的旋转要求 阅读全文
posted @ 2020-08-01 11:01 郭先生的博客 阅读(186) 评论(0) 推荐(0) 编辑
摘要:上一篇郭先生解析了一下官方的骨骼动画案例,这篇郭先生就要做一个稍微复杂一点的骨骼动画了,就拿一个小人下手吧。在线案例请点击博客原文。话不多说先上大图 骨骼动画在GUI上面都有体现。制作骨骼动画的步骤在官方案例中已经看到了,这里在回忆一下。骨骼动画的基本步骤 创建一个BufferGeometry,并添 阅读全文
posted @ 2020-07-31 09:47 郭先生的博客 阅读(482) 评论(0) 推荐(0) 编辑
摘要:今后的几篇郭先生主要说说three.js骨骼动画。three.js骨骼动画十分有意思,但是对于初学者来说,学起来要稍微困难一些,官方文档比较少,网上除了用圆柱体的例子就是引用外部模型的,想要熟练使用骨骼动画就需要不断地探索和练习。这篇是初探three.js骨骼动画,也不深入讲解,先说说它的实现和原理 阅读全文
posted @ 2020-07-30 09:29 郭先生的博客 阅读(250) 评论(0) 推荐(0) 编辑
摘要:今天郭先生发现大家更喜欢看我发的three.js小作品,今天我就发一个3d版本推箱子的游戏,其实webGL有很多框架,three.js并不合适做游戏引擎,但是可以尝试一些小游戏。在线案例请点击博客原文。 要制作一个推箱子游戏,正常要有以下4个步骤 定义一些数组,要有开始箱子数组、结束箱子数组、地面数 阅读全文
posted @ 2020-07-29 10:12 郭先生的博客 阅读(314) 评论(4) 推荐(1) 编辑
摘要:今天郭先生收到评论,想要之前制作太阳系的案例,因为找不到了,于是在vue版本又制作一版太阳系,在线案例请点击博客原文(加载时间比较长,请稍等一下)。话不多说先看效果图。 图片有点多,先放三张,相比于上一个版本,这个版本制作更加细致,动画更加流畅。那么下面分析一下主要代码。 1. 先介绍一下变量 这里 阅读全文
posted @ 2020-07-28 09:48 郭先生的博客 阅读(509) 评论(2) 推荐(1) 编辑
摘要:因为之前的几节讲了一些数学方法,例如Vector3、Matrix4、Euler还有Quaternion的知识。所以这篇郭先生就来说说用three.js怎么制作一个魔方。在线案例请点击博客原文 制作魔方主要运用坐标变换的知识,制作魔方的方法有很多,建议你先在大脑中构思,然后试着做一做,下面我将一种比较 阅读全文
posted @ 2020-07-27 09:33 郭先生的博客 阅读(344) 评论(1) 推荐(1) 编辑
摘要:这篇郭先生就来说说欧拉角和四元数,欧拉角和四元数的优缺点是老生常谈的话题了,使用条件我就不多说了,我只说一下使用方法。 1. 欧拉角(Euler) 欧拉角描述一个旋转变换,通过指定轴顺序和其各个轴向上的指定旋转角度来旋转一个物体。下面我们开看看它的方法 1. set( x: number, y: n 阅读全文
posted @ 2020-07-26 08:57 郭先生的博客 阅读(126) 评论(0) 推荐(0) 编辑
摘要:今天郭先生说一说three.js中的Matrix4,相较于Matrix3来说,Matrix4和three.js联系的更紧密,因为在4x4矩阵最常用的用法是作为一个变换矩阵。这使得表示三维空间中的一个点的向量Vector3通过乘以矩阵来进行转换,如平移、旋转、剪切、缩放、反射、正交或透视投影等。这就是 阅读全文
posted @ 2020-07-25 18:50 郭先生的博客 阅读(43) 评论(0) 推荐(0) 编辑
摘要:说了几篇的数学方法,这篇放松一下,郭先生说说绕任意轴转动。说一说其中一种方法,也是比较容易理解的一种,它的原理就是将子对象放到一个盒子中,然后改变子对象相对于父对象的位置(因为子对象的原点默认还是在盒子的中心),最后转动盒子,这样子对象的旋转就不是绕盒子的中心了。如图所示。在线案例点击模拟门旋转(更 阅读全文
posted @ 2020-07-24 11:28 郭先生的博客 阅读(100) 评论(0) 推荐(0) 编辑
摘要:今天郭先生来说一说three.js的三维矩阵,这块知识需要结合线性代数的一些知识,毕业时间有点长,线性代数的知识大部分都还给了老师。于是一起简单的复习了一下。所有的计算都是使用列优先顺序进行的。然而,由于实际的排序在数学上没有什么不同, 而且大多数人习惯于以行优先顺序考虑矩阵,所以three.js文 阅读全文
posted @ 2020-07-23 10:03 郭先生的博客 阅读(132) 评论(0) 推荐(0) 编辑
摘要:今天郭先生来说一说three.js的Vector3,该类表示的是一个三维向量(3D vector)。 一个三维向量表示的是一个有顺序的、三个为一组的数字组合(标记为x、y和z),可被用来表示很多事物,它的构造函数为Vector3( x : Float, y : Float, z : Float )x 阅读全文
posted @ 2020-07-22 10:08 郭先生的博客 阅读(133) 评论(0) 推荐(0) 编辑
摘要:今天郭先生就来继续说一说three.js数学方法中的plane(平面)。在三维空间中无限延伸的二维平面,平面方程用单位长度的法向量和常数表示。构造器为Plane( normal : Vector3, constant : Float )。第一个参数为平面的法向量,既然是法向量也就预示着这个平面是有方 阅读全文
posted @ 2020-07-21 09:09 郭先生的博客 阅读(164) 评论(0) 推荐(0) 编辑
摘要:从今天开始郭先生就会说一下three.js 的一些数学方法了,像Box3、Plane、Vector3、Matrix3、Matrix4当然还有欧拉角和四元数。今天说一说three.js的Box3方法(Box2是Box3的二维版本,可以参考Box3)。在线案例点击博客原文。 Box3在3D空间中表示一个 阅读全文
posted @ 2020-07-20 09:57 郭先生的博客 阅读(196) 评论(0) 推荐(0) 编辑
摘要:这篇郭先生来说说BufferGeometry,类型化数组和粒子系统的使用,并且让图片有马赛克效果(同理可以让不清晰的图片清晰化),如图所示。在线案例点击博客原文 1. 解析图片 解析图片和上一篇一样 initCanvas() { canvas = document.createElement('ca 阅读全文
posted @ 2020-07-19 15:16 郭先生的博客 阅读(206) 评论(0) 推荐(1) 编辑
摘要:今天郭先生说一下用canvas解析图片流,然后制作一个动态二维码的小案例,话不多说先上图,在线案例点击博客原文。这是郭先生的微信二维码哦! 1. 解析图片流 canvas = document.createElement('canvas');//创建canvas画布 content = canvas 阅读全文
posted @ 2020-07-18 11:33 郭先生的博客 阅读(192) 评论(0) 推荐(1) 编辑
摘要:今天郭先生来说一说three.js的一个图形用户界面工具gui,如下图,在线案例点击博客原文 1. 引入GUI,构造函数 按照所需,引入的方式也不相同。 //通过script标签引入 <script src="../libs/dat.gui.js"></script> var gui = new d 阅读全文
posted @ 2020-07-17 09:20 郭先生的博客 阅读(82) 评论(0) 推荐(0) 编辑
摘要:通过地图数据配合three可以做出非常酷炫的地图,在大数据展示中十分常见。 这篇郭先生就来说说使用three.js几何体制作3D地图。在线案例点击原文地址。 地图的数据是各个地图块的点数组,通过THREE.ExtrudeGeometry方法挤压出地图的版块,然后通过THREE.Line方法画出地图的 阅读全文
posted @ 2020-07-16 09:15 郭先生的博客 阅读(164) 评论(0) 推荐(0) 编辑
摘要:今天郭先生说一说three.js的材质。材质描述了对象objects的外观。它们的定义方式与渲染器无关, 因此,如果您决定使用不同的渲染器,不必重写材质。 1. three.js材质基类 所有其他材质类型都继承了Material。 下面是一些属性: .alphaTest : Float设置运行alp 阅读全文
posted @ 2020-07-15 09:07 郭先生的博客 阅读(54) 评论(0) 推荐(0) 编辑
摘要:郭先生发现在开始学习three.js着色器材质时,我们经常会无从下手,辛苦写下的着色器,也会因莫名的报错而手足无措。原因是着色器材质它涉及到另一种语言–GLSL,只有懂了这个语言,我们才能更好的写出着色器材质,利用好的我们的GPU。这篇说一说glsl内置函数。 1. 和角度相关的函数 下面是一个和角 阅读全文
posted @ 2020-08-04 09:27 郭先生的博客 阅读(123) 评论(0) 推荐(1) 编辑
摘要:说起three.js,着色器材质总是绕不过的话题,今天郭先生就说一说什么是着色器材质。着色器材质是很需要灵感和数学知识的,可以用简短的代码和绘制出十分丰富的图像,可以说着色器材质是脱离three.js的另一块知识,因此它十分难讲,我们只能在一个一个案例中逐渐掌握着色器语言的使用技巧。 1. 什么是着 阅读全文
posted @ 2020-08-03 09:06 郭先生的博客 阅读(168) 评论(2) 推荐(1) 编辑
摘要:上一篇说了一下自制骨骼动画,这一篇郭先生使用帧动画让骨骼动画动起来。帧动画是一套比较完善的动画剪辑方法,详细我的api我们就不多说了,网上有很多例子,自行查找学习。在线案例请点击博客原文。话不多说先上图。 1. 初始化一些四元数 首先我们需要一些四元数,因为我们的动画里有很多旋转并且帧动画的旋转要求 阅读全文
posted @ 2020-08-01 11:01 郭先生的博客 阅读(186) 评论(0) 推荐(0) 编辑
摘要:上一篇郭先生解析了一下官方的骨骼动画案例,这篇郭先生就要做一个稍微复杂一点的骨骼动画了,就拿一个小人下手吧。在线案例请点击博客原文。话不多说先上大图 骨骼动画在GUI上面都有体现。制作骨骼动画的步骤在官方案例中已经看到了,这里在回忆一下。骨骼动画的基本步骤 创建一个BufferGeometry,并添 阅读全文
posted @ 2020-07-31 09:47 郭先生的博客 阅读(482) 评论(0) 推荐(0) 编辑
摘要:今后的几篇郭先生主要说说three.js骨骼动画。three.js骨骼动画十分有意思,但是对于初学者来说,学起来要稍微困难一些,官方文档比较少,网上除了用圆柱体的例子就是引用外部模型的,想要熟练使用骨骼动画就需要不断地探索和练习。这篇是初探three.js骨骼动画,也不深入讲解,先说说它的实现和原理 阅读全文
posted @ 2020-07-30 09:29 郭先生的博客 阅读(250) 评论(0) 推荐(0) 编辑
摘要:今天郭先生发现大家更喜欢看我发的three.js小作品,今天我就发一个3d版本推箱子的游戏,其实webGL有很多框架,three.js并不合适做游戏引擎,但是可以尝试一些小游戏。在线案例请点击博客原文。 要制作一个推箱子游戏,正常要有以下4个步骤 定义一些数组,要有开始箱子数组、结束箱子数组、地面数 阅读全文
posted @ 2020-07-29 10:12 郭先生的博客 阅读(314) 评论(4) 推荐(1) 编辑
摘要:今天郭先生收到评论,想要之前制作太阳系的案例,因为找不到了,于是在vue版本又制作一版太阳系,在线案例请点击博客原文(加载时间比较长,请稍等一下)。话不多说先看效果图。 图片有点多,先放三张,相比于上一个版本,这个版本制作更加细致,动画更加流畅。那么下面分析一下主要代码。 1. 先介绍一下变量 这里 阅读全文
posted @ 2020-07-28 09:48 郭先生的博客 阅读(509) 评论(2) 推荐(1) 编辑
摘要:因为之前的几节讲了一些数学方法,例如Vector3、Matrix4、Euler还有Quaternion的知识。所以这篇郭先生就来说说用three.js怎么制作一个魔方。在线案例请点击博客原文 制作魔方主要运用坐标变换的知识,制作魔方的方法有很多,建议你先在大脑中构思,然后试着做一做,下面我将一种比较 阅读全文
posted @ 2020-07-27 09:33 郭先生的博客 阅读(344) 评论(1) 推荐(1) 编辑
摘要:这篇郭先生就来说说欧拉角和四元数,欧拉角和四元数的优缺点是老生常谈的话题了,使用条件我就不多说了,我只说一下使用方法。 1. 欧拉角(Euler) 欧拉角描述一个旋转变换,通过指定轴顺序和其各个轴向上的指定旋转角度来旋转一个物体。下面我们开看看它的方法 1. set( x: number, y: n 阅读全文
posted @ 2020-07-26 08:57 郭先生的博客 阅读(126) 评论(0) 推荐(0) 编辑
摘要:今天郭先生说一说three.js中的Matrix4,相较于Matrix3来说,Matrix4和three.js联系的更紧密,因为在4x4矩阵最常用的用法是作为一个变换矩阵。这使得表示三维空间中的一个点的向量Vector3通过乘以矩阵来进行转换,如平移、旋转、剪切、缩放、反射、正交或透视投影等。这就是 阅读全文
posted @ 2020-07-25 18:50 郭先生的博客 阅读(43) 评论(0) 推荐(0) 编辑