babylon.js 学习笔记(10)

合集 - babylon.js(10)

1.babylon.js 学习笔记(1)2023-05-142.babylon.js 学习笔记(2)2023-05-143.babylon.js 学习笔记(3)2023-05-204.babylon.js 学习笔记(4)2023-05-215.babylon.js 学习笔记(5)2023-05-216.babylon.js 学习笔记(6)2023-05-287.babylon.js 学习笔记(7)2023-05-288.babylon.js 学习笔记(8)2023-06-049.babylon.js 学习笔记(9)2023-06-04

10.babylon.js 学习笔记(10)2023-06-17

收起

今天来学习下车床(lathe)建型及粒子系统，babylon.js有一个很强大的函数CreateLathe，可以将一段路径经过旋转后，形成1个shape，这么说有点抽象，比如下面这张图：

其中的关键点坐标为：

+ View Code?

1 2 3 4 5 6 7 8 9 10

const fountainProfile = [     new BABYLON.Vector3(0, 0, 0),     new BABYLON.Vector3(10, 0, 0),     new BABYLON.Vector3(10, 4, 0),     new BABYLON.Vector3(8, 4, 0),     new BABYLON.Vector3(8, 1, 0),     new BABYLON.Vector3(1, 2, 0),     new BABYLON.Vector3(1, 15, 0),     new BABYLON.Vector3(3, 17, 0) ];

调用CreateLathe后：

?

1	const fountain = BABYLON.MeshBuilder.CreateLathe("fountain", { shape: fountainProfile, sideOrientation: BABYLON.Mesh.DOUBLESIDE }, scene);

再给几个示例：

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

const fountainProfile = [     new BABYLON.Vector3(0, 0, 0),     new BABYLON.Vector3(10, 0, 0),     new BABYLON.Vector3(10, 4, 0),     new BABYLON.Vector3(8, 4, 0),     new BABYLON.Vector3(8, 1, 0),     new BABYLON.Vector3(1, 2, 0),     new BABYLON.Vector3(1, 15, 0),     new BABYLON.Vector3(3, 17, 0) ];   const myShape = [     new BABYLON.Vector3(3, 0, 0),     new BABYLON.Vector3(10, 5, 0),     new BABYLON.Vector3(5, 10, 0),     new BABYLON.Vector3(12, 15, 0),     new BABYLON.Vector3(3, 20, 0) ];   const createScene = function () {     const scene = new BABYLON.Scene(engine);       const camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 2.5, 70, BABYLON.Vector3.Zero());     camera.attachControl(canvas, true);       const light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0));       //Create lathe1     const fountain = BABYLON.MeshBuilder.CreateLathe("fountain", { shape: fountainProfile, sideOrientation: BABYLON.Mesh.DOUBLESIDE }, scene);       //Create lathe2     const lathe1 = BABYLON.MeshBuilder.CreateLathe("lathe1", { shape: myShape, sideOrientation: BABYLON.Mesh.DOUBLESIDE });     lathe1.position.x = -30;     lathe1.scaling = new BABYLON.Vector3(0.75, 0.75, 0.75);       //Create lathe3     const lathe2 = BABYLON.MeshBuilder.CreateLathe("lathe2", { shape: myShape, closed: false, arc: 0.75, sideOrientation: BABYLON.Mesh.DOUBLESIDE });     lathe2.position.x = 30;     lathe2.scaling = new BABYLON.Vector3(0.75, 0.75, 0.75);       showAxis(24, scene);     return scene; }

最右侧的残缺效果，主要是 closed: false, arc: 0.75 这2个参数起了作用。

在线地址：https://yjmyzz.github.io/babylon_js_study/day10/01.html

 

接下来看看粒子系统，直接上代码，建议大家调整下这里面的参数，感受不同的效果：

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

const createScene = function () {     const scene = new BABYLON.Scene(engine);       const camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 2.5, 70, BABYLON.Vector3.Zero());     camera.attachControl(canvas, true);       const light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0));       // 创建粒子系统     var particleSystem = new BABYLON.ParticleSystem("particles", 5000, scene);       //粒子的纹理图片     particleSystem.particleTexture = new BABYLON.Texture("../assets/img/flare.png", scene);       //粒子的发射距离     particleSystem.emitter = new BABYLON.Vector3(0, 5, 0); // the starting object, the emitter     particleSystem.minEmitBox = new BABYLON.Vector3(-1, -5, 0); // Starting all from     particleSystem.maxEmitBox = new BABYLON.Vector3(1, -5, 0); // To...       //粒子颜色     particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);     particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);     particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);       //粒子大小     particleSystem.minSize = 0.1;     particleSystem.maxSize = 0.6;       //粒子存在的生命周期(时长）     particleSystem.minLifeTime = 2;     particleSystem.maxLifeTime = 3.8;       //发射速率     particleSystem.emitRate = 1500;       //混合模式 : BLENDMODE_ONEONE, or BLENDMODE_STANDARD     particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;       //重力值     particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);       //发射方向     particleSystem.direction1 = new BABYLON.Vector3(-3, 8, 3);     particleSystem.direction2 = new BABYLON.Vector3(3, 8, -3);       //角度、半径     particleSystem.minAngularSpeed = 0;     particleSystem.maxAngularSpeed = Math.PI;       //速度及力度大小     particleSystem.minEmitPower = 1;     particleSystem.maxEmitPower = 2.2;     particleSystem.updateSpeed = 0.025;       //开喷     particleSystem.start();       return scene; }

其中flare.jpg长这样：

上面这段代码跑出来，效果是这样的：

在线地址：https://yjmyzz.github.io/babylon_js_study/day10/02.html

 

把今天学到的2个知识点，结合一下，就变成这样：

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

const fountainProfile = [     new BABYLON.Vector3(0, 0, 0),     new BABYLON.Vector3(10, 0, 0),     new BABYLON.Vector3(10, 4, 0),     new BABYLON.Vector3(8, 4, 0),     new BABYLON.Vector3(8, 1, 0),     new BABYLON.Vector3(1, 2, 0),     new BABYLON.Vector3(1, 15, 0),     new BABYLON.Vector3(3, 17, 0) ];   const createScene = function () {     const scene = new BABYLON.Scene(engine);       const camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 2.5, 70, BABYLON.Vector3.Zero());     camera.attachControl(canvas, true);       const light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0));       const fountain = BABYLON.MeshBuilder.CreateLathe("fountain", { shape: fountainProfile, sideOrientation: BABYLON.Mesh.DOUBLESIDE }, scene);     fountain.position.y = -15;       // Create a particle system     var particleSystem = new BABYLON.ParticleSystem("particles", 5000, scene);       //Texture of each particle     particleSystem.particleTexture = new BABYLON.Texture("../assets/img/flare.png", scene);       // Where the particles come from     particleSystem.emitter = new BABYLON.Vector3(0, 5, 0); // the starting object, the emitter     particleSystem.minEmitBox = new BABYLON.Vector3(-1, -5, 0); // Starting all from     particleSystem.maxEmitBox = new BABYLON.Vector3(1, -5, 0); // To...       // Colors of all particles     particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);     particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);     particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);       // Size of each particle (random between...     particleSystem.minSize = 0.1;     particleSystem.maxSize = 0.6;       // Life time of each particle (random between...     particleSystem.minLifeTime = 2;     particleSystem.maxLifeTime = 3.8;       // Emission rate     particleSystem.emitRate = 1500;       // Blend mode : BLENDMODE_ONEONE, or BLENDMODE_STANDARD     particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;       // Set the gravity of all particles     particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);       // Direction of each particle after it has been emitted     particleSystem.direction1 = new BABYLON.Vector3(-3, 8, 3);     particleSystem.direction2 = new BABYLON.Vector3(3, 8, -3);       // Angular speed, in radians     particleSystem.minAngularSpeed = 0;     particleSystem.maxAngularSpeed = Math.PI;       // Speed     particleSystem.minEmitPower = 1;     particleSystem.maxEmitPower = 2.2;     particleSystem.updateSpeed = 0.025;       // Start the particle system     particleSystem.start();       return scene; }

在线地址：https://yjmyzz.github.io/babylon_js_study/day10/03.html

还可以给这个喷泉加点交互，鼠标点击到喷泉时，切换喷发

在线地址：https://yjmyzz.github.io/babylon_js_study/day10/03_b.html

 

官网还有很多粒子系统的精彩示例，感兴趣的同学可以深入研究：

在线地址：https://yjmyzz.github.io/babylon_js_study/day10/04.html

 

在线地址：https://yjmyzz.github.io/babylon_js_study/day10/06.html

 

在线地址：https://yjmyzz.github.io/babylon_js_study/day10/05.html