07 2020 档案
摘要：上一篇郭先生解析了一下官方的骨骼动画案例，这篇郭先生就要做一个稍微复杂一点的骨骼动画了，就拿一个小人下手吧。在线案例请点击博客原文。话不多说先上大图 骨骼动画在GUI上面都有体现。制作骨骼动画的步骤在官方案例中已经看到了，这里在回忆一下。骨骼动画的基本步骤 创建一个BufferGeometry，并添
阅读全文
摘要：今后的几篇郭先生主要说说three.js骨骼动画。three.js骨骼动画十分有意思，但是对于初学者来说，学起来要稍微困难一些，官方文档比较少，网上除了用圆柱体的例子就是引用外部模型的，想要熟练使用骨骼动画就需要不断地探索和练习。这篇是初探three.js骨骼动画，也不深入讲解，先说说它的实现和原理
阅读全文
摘要：今天郭先生发现大家更喜欢看我发的three.js小作品，今天我就发一个3d版本推箱子的游戏，其实webGL有很多框架，three.js并不合适做游戏引擎，但是可以尝试一些小游戏。在线案例请点击博客原文。 要制作一个推箱子游戏，正常要有以下4个步骤 定义一些数组，要有开始箱子数组、结束箱子数组、地面数
阅读全文
摘要：今天郭先生收到评论，想要之前制作太阳系的案例，因为找不到了，于是在vue版本又制作一版太阳系，在线案例请点击博客原文（加载时间比较长，请稍等一下）。话不多说先看效果图。 图片有点多，先放三张，相比于上一个版本，这个版本制作更加细致，动画更加流畅。那么下面分析一下主要代码。 1. 先介绍一下变量 这里
阅读全文
摘要：因为之前的几节讲了一些数学方法，例如Vector3、Matrix4、Euler还有Quaternion的知识。所以这篇郭先生就来说说用three.js怎么制作一个魔方。在线案例请点击博客原文 制作魔方主要运用坐标变换的知识，制作魔方的方法有很多，建议你先在大脑中构思，然后试着做一做，下面我将一种比较
阅读全文
摘要：这篇郭先生就来说说欧拉角和四元数，欧拉角和四元数的优缺点是老生常谈的话题了，使用条件我就不多说了，我只说一下使用方法。 1. 欧拉角（Euler） 欧拉角描述一个旋转变换，通过指定轴顺序和其各个轴向上的指定旋转角度来旋转一个物体。下面我们开看看它的方法 1. set( x: number, y: n
阅读全文
摘要：今天郭先生说一说three.js中的Matrix4，相较于Matrix3来说，Matrix4和three.js联系的更紧密，因为在4x4矩阵最常用的用法是作为一个变换矩阵。这使得表示三维空间中的一个点的向量Vector3通过乘以矩阵来进行转换，如平移、旋转、剪切、缩放、反射、正交或透视投影等。这就是
阅读全文
摘要：说了几篇的数学方法，这篇放松一下，郭先生说说绕任意轴转动。说一说其中一种方法，也是比较容易理解的一种，它的原理就是将子对象放到一个盒子中，然后改变子对象相对于父对象的位置（因为子对象的原点默认还是在盒子的中心），最后转动盒子，这样子对象的旋转就不是绕盒子的中心了。如图所示。在线案例点击模拟门旋转（更
阅读全文
摘要：今天郭先生来说一说three.js的三维矩阵，这块知识需要结合线性代数的一些知识，毕业时间有点长，线性代数的知识大部分都还给了老师。于是一起简单的复习了一下。所有的计算都是使用列优先顺序进行的。然而，由于实际的排序在数学上没有什么不同， 而且大多数人习惯于以行优先顺序考虑矩阵，所以three.js文
阅读全文
摘要：今天郭先生来说一说three.js的Vector3，该类表示的是一个三维向量（3D vector）。 一个三维向量表示的是一个有顺序的、三个为一组的数字组合（标记为x、y和z），可被用来表示很多事物，它的构造函数为Vector3( x : Float, y : Float, z : Float )x
阅读全文
摘要：今天郭先生就来继续说一说three.js数学方法中的plane（平面）。在三维空间中无限延伸的二维平面，平面方程用单位长度的法向量和常数表示。构造器为Plane( normal : Vector3, constant : Float )。第一个参数为平面的法向量，既然是法向量也就预示着这个平面是有方
阅读全文
摘要：从今天开始郭先生就会说一下three.js 的一些数学方法了，像Box3、Plane、Vector3、Matrix3、Matrix4当然还有欧拉角和四元数。今天说一说three.js的Box3方法（Box2是Box3的二维版本，可以参考Box3）。在线案例点击博客原文。 Box3在3D空间中表示一个
阅读全文
摘要：这篇郭先生来说说BufferGeometry，类型化数组和粒子系统的使用，并且让图片有马赛克效果（同理可以让不清晰的图片清晰化），如图所示。在线案例点击博客原文 1. 解析图片 解析图片和上一篇一样 initCanvas() { canvas = document.createElement('ca
阅读全文
摘要：今天郭先生说一下用canvas解析图片流，然后制作一个动态二维码的小案例，话不多说先上图，在线案例点击博客原文。这是郭先生的微信二维码哦！ 1. 解析图片流 canvas = document.createElement('canvas');//创建canvas画布 content = canvas
阅读全文
摘要：今天郭先生来说一说three.js的一个图形用户界面工具gui，如下图，在线案例点击博客原文 1. 引入GUI,构造函数 按照所需，引入的方式也不相同。 //通过script标签引入 <script src="../libs/dat.gui.js"></script> var gui = new d
阅读全文
摘要：通过地图数据配合three可以做出非常酷炫的地图，在大数据展示中十分常见。 这篇郭先生就来说说使用three.js几何体制作3D地图。在线案例点击原文地址。 地图的数据是各个地图块的点数组，通过THREE.ExtrudeGeometry方法挤压出地图的版块，然后通过THREE.Line方法画出地图的
阅读全文
摘要：今天郭先生说一说three.js的材质。材质描述了对象objects的外观。它们的定义方式与渲染器无关， 因此，如果您决定使用不同的渲染器，不必重写材质。 1. three.js材质基类 所有其他材质类型都继承了Material。 下面是一些属性： .alphaTest : Float设置运行alp
阅读全文
摘要：上几篇说了three.js的曲线，这篇来郭先生来说说three.js曲线，在线案例点击郭先生的博客查看。 1. 了解three.js曲线 之前已经说了一些three.js的几何体，这篇说一说three.js曲线。曲线的种类主要分两种，二维曲线和三维曲线。下面整理了这些曲线 名称参数 ArcCurve
阅读全文
摘要：这一篇郭先生就说说ThreeBSP（组合网格）的使用，先上图，在线案例点击原文链接查看 组合网格允许我们使用二元操作函数操作网格，但是提前需要引入threeBSP.js,它提供了如下三个函数。 名称描述 intersect（相交） 使用该函数可以在两个几何体的交集上创建新的几何体。两个几何体相互交叠
阅读全文
摘要：上一篇介绍了几何体的构造体参数，这篇郭先生就接着上一篇说。 1. ExtrudeGeometry挤压几何体 挤压几何体允许我们从一条形状路径中，挤压出一个Geometry。ExtrudeGeometry有两个参数，第一个参数是一个图形，第二个参数是它的配置 var shape = new THREE
阅读全文
摘要：上一篇简单的介绍了几何体的构造体参数，这一篇郭先生就更加详细的说一说（十分简单的几何体我就不说了）。 1. ShapeGeometry形状几何体 形状几何体方便我们从一个或多个路径形状中创建一个单面多边形几何体，和canvas一样都是二维图形。下面我们只做一颗心形。 var shape = new
阅读全文
摘要：我的个人博客3.x已经更新了，初学three.js的小伙伴可以关注一下哦，我将在我的博客记录平时的学习心得，并有很多小案例，这些小案例比较基础，也不会有官网的案例那么难懂，很合适初学者，博客地址郭先生的博客，记得是郭先生的博客哦。 那么本篇郭先生来说一说three.js几何体都有哪些？在线案例进入原
阅读全文
