2020年12月_点燃火柴

12月 11月 09月 08月 07月 06月 05月

原创 three.js粒子系统-两个场景渲染在一个页面(vue中使用three.js46)

两个场景渲染在一个页面1.场景渲染1.1创建两个场景1.2创建两个相机1.3通过渲染器将两个场景融合2.创建左右移动的小怪兽2.1获取贴图2.2 通过贴图创建点精灵材质2.3 创建精灵并添加到场景2.4 创建精灵动画3.demo效果4.demo代码1.场景渲染1.1创建两个场景我们需要把两个场景渲染在同一个页面那么首先创建两个场景，具体如下：// 创建场景createScene () { // 创建一个场景 this.scene = new THREE.Scene() // 创建另一个

2020-12-29 23:11:57 1036 1

原创 three.js粒子系统-通过加载纹理贴图实现下雪特效(vue中使用three.js45)

通过纹理导入实现下雪特效1.VUE中纹理导入过程1.1纹理图片存放路径1.2获取环境变量中的BASE_URL1.3通过THREE.TextureLoader加载纹理贴图2.创建下雪特效2.1用加载的纹理贴图创建雪花2.2 实现下雪特效动画3.demo效果4.demo代码1.VUE中纹理导入过程1.1纹理图片存放路径vue中导入时默认的public下，所以要使用的纹理图片需要放在该路径下，如下图images文件夹下的snow.png就是我们要使用的纹理图片1.2获取环境变量中的BASE_URL在v

2020-12-18 00:01:51 1196

原创 three.js粒子系统-通过加载纹理贴图实现雨滴特效(vue中使用three.js44)

通过纹理导入实现雨滴特效1.VUE中纹理导入过程1.1纹理图片存放路径1.2获取环境变量中的BASE_URL1.3通过THREE.TextureLoader加载纹理贴图2.创建雨滴特效2.1用加载的纹理贴图创建雨滴2.2 实现下雨特效动画3.demo效果4.demo代码1.VUE中纹理导入过程1.1纹理图片存放路径vue中导入时默认的public下，所以要使用的纹理图片需要放在该路径下，如下图images文件夹下的raindrop-3.png就是我们要使用的纹理图片1.2获取环境变量中的BASE_

2020-12-17 23:31:18 1651

原创 three.js粒子系统-通过THREE.SpriteMaterial材质格式化粒子(vue中使用three.js43)

通过THREE.SpriteMaterial材质使用HTML5画布格式化粒子1.SpriteMaterial材质介绍2.使用HTML5画布格式化粒子2.1创建Texture画布纹理2.2 创建SpriteMaterial材质2.2 创建Sprite对象并添加到场景3.demo效果4.demo代码1.SpriteMaterial材质介绍SpriteMaterial类继承自Material基类，所有Material类的属性和方法SpriteMaterial类都可以使用。SpriteMaterial类还有自

2020-12-15 23:03:24 1928

原创 three.js粒子系统-通过THREE.PointsMaterial材质使用HTML5画布格式化粒子(vue中使用three.js42)

通过THREE.PointsMaterial材质使用HTML5画布格式化粒子1.使用画布格式化粒子介绍2.使用HTML5画布格式化粒子2.1创建Texture画布纹理2.2 创建粒子材质2.2 创建Points对象并添加到场景3.demo效果4.demo代码1.使用画布格式化粒子介绍老版的three.js提供了两种使用THML5画布格式化粒子的方法，即使用CanvasRenderer类和使用WebGLRenderer类，但是新版three.js将CanvasRenderer类移除了所以我们讨论学习通

2020-12-15 00:12:07 1000

原创 three.js粒子系统-THREE.PointCloudMaterial材质属性介绍与使用(vue中使用three.js41)

THREE.PointCloudMaterial材质属性介绍与使用1.THREE.PointCloudMaterial材质属性介绍2.THREE.PointCloudMaterial材质使用3.demo效果4.demo代码1.THREE.PointCloudMaterial材质属性介绍我们已经知道创建粒子系统需要两个参数，一个几何体和一个材质。接下来主要介绍一下THREE.PointCloudMaterial的属性。属性描述color粒子系统中所有粒子颜色，当vertexColo

2020-12-12 00:45:09 829

原创 three.js粒子系统-使用THREE.PointCloudMaterial材质创建不同颜色粒子(vue中使用three.js40)

粒子系统和使用1.创建粒子系统介绍2.创建粒子系统步骤3.demo效果4.demo代码1.创建粒子系统介绍当多个粒子需要同时管理时，就有了粒子系统的概念。创建粒子系统接收两个参数，一个几何体和一个材质。材质用来给粒子上色和添加纹理，几何体用来指定粒子的位置。接下来对比一下不同版本的创建粒子材质和粒子系统的方法：方法类别最旧版本中间版本最新版创建粒子材质THREE.ParticleBasicMaterialTHREE.PointCloudMaterialTHREE.Poin

2020-12-10 23:09:03 808

原创 three.js之粒子和粒子系统(vue中使用three.js39)

粒子介绍和使用1.粒子介绍2.如何创建粒子3.demo效果4.demo代码1.粒子介绍粒子（particle）可以用来创建出很多小物体，这些小物体可以用来模拟雨滴、雪花和火焰。也可以将某个单一几何体渲染成一组粒子，分别对它们进行控制，达到想要的效果。2.如何创建粒子创建粒子的方法很简单，如下const material = new THREE.SpriteMaterial();//创建粒子材质const sprite = new THREE.Sprite(material);//创建粒子thi

2020-12-10 00:03:48 994

原创 three.js之高级几何体-使用二元操作组合网格(vue中使用three.js38)

二元操作组合网格介绍1.ThreeBSP方法介绍2.ThreeBSP方法使用步骤2.1ThreeBSP库引入2.2使用二元操作方法3.demo说明4.demo代码1.ThreeBSP方法介绍目前我们创建几何体都是一次单独创建一个。实际上我们有一个库专门用来对网格对象进行相交、联合和相减的操作，这个库就是THREEBSP，我们通过它可以更加高效的创建出想要的三维图形，这个库提供了以下三个方法：名称描述intersect（相交）该函数可以把两个几何体相交的部分创建出新的几何体，即两个

2020-12-07 00:16:06 788 1

原创 three.js之高级几何体-TextGeometry文本几何体创建中文文本(vue中使用three.js37)

TextGeometry创建中文文本1.引言2.创建中文实现步骤2.1字体文件引入2.2创建文本几何体2.3创建网格对象并添加到场景3.demo说明4.demo代码1.引言上一篇文章中使用TextGeometry创建三维文本使用的是helvetiker字体，只能创建英文字符的文本，不能创建中文字符的文本。实际使用中很可能会使用中文，经过一番折腾后，终于出现在屏幕上了，接下来就介绍一下实现过程。2.创建中文实现步骤2.1字体文件引入示例中使用的是支持中文的YaHei字体，首先需要获取 YaHei_R

2020-12-03 22:52:59 1485

原创 three.js之高级几何体-TextGeometry文本几何体(vue中使用three.js36)

TextGeometry文本几何体介绍和使用1.TextGeometry文本几何体介绍2.TextGeometry文本几何体使用2.1字体文件引入2.2创建文本几何体2.3创建网格对象并添加到场景3.demo说明4.demo代码1.TextGeometry文本几何体介绍TextGeometry可以用来创建三维文本。其实是通过指定字体创建字符，然后像拉伸几何体那样把文字拉伸，继而得到三维文本。创建TextGeometry文本几何体有很多参数与ExtrudeGeometry几何体一样，具体如下：属

2020-12-02 22:07:09 4032 5

原创 three.js之高级几何体-ParametricGeometry自定义几何体(vue中使用three.js35)

ParametricGeometry自定义几何体介绍和使用1.ParametricGeometry自定义几何体介绍2.ParametricGeometry自定义几何体使用2.1定义function2.2创建ParametricGeometry几何体对象2.3附材质创建Mesh对象并添加到场景3.demo说明4.demo代码1.ParametricGeometry自定义几何体介绍ParametricGeometry可以创建基于等式的几何体。即可以通过自定义函数来创建自定义的几何体。创建Parametric

2020-12-01 22:02:32 1211

空空如也

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

TA关注的人

点燃火柴的博客