Mapbox 与 Babylon.js 可视化 添加喷泉粒子

我决定不从Babylonjs 基础来讲了 直接整合mapbox与babylonjs可视化来讲

我整合一个类库 后续不断更新中

• npm i @haibalai/mapbox-babylonjs

 

初始化mapbox-babylonjs 类库， map 是mapbox.gl 的map 对象

• import { BabylonMapManager } from "@haibalai/mapbox-babylonjs";
• BabylonMapManager.init(map);

 

添加正方体

• import { BabylonMapManager } from "@haibalai/mapbox-babylonjs";
• let scene = BabylonMapManager.getScene(map);
• 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)
• ];
• //Create lathe
• const fountain = BABYLON.MeshBuilder.CreateLathe("fountain", {shape: fountainProfile, sideOrientation: 1}, scene);
• BabylonMapManager.addToMap(fountain,[113.87629508972168, 22.544824222364753,0]);
• // Create a particle system
• var particleSystem = new BABYLON.ParticleSystem("particles", 5000, scene);
• //Texture of each particle
• particleSystem.particleTexture = new BABYLON.Texture("https://playground.babylonjs.com/textures/flare.png", scene);
• // Where the particles come from
• particleSystem.emitter = BabylonMapManager.getPointVector([113.87629508972168, 22.544824222364753,0])

Mapbox 与 Babylon.js 可视化 添加喷泉粒子 － 小专栏