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])
