首页 > 其他分享 >Mapbox 与 Babylon.js 可视化 添加喷泉粒子

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

时间:2022-11-23 16:55:05浏览次数:69  
标签:babylonjs Babylon Vector3 BabylonMapManager js mapbox Mapbox new BABYLON

我决定不从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 可视化 添加喷泉粒子 - 小专栏

标签:babylonjs,Babylon,Vector3,BabylonMapManager,js,mapbox,Mapbox,new,BABYLON
From: https://www.cnblogs.com/haibalai/p/16918922.html

相关文章

  • JS设置光标选中text中指定文字
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""​​http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd​​​"><htmlxmlns="​​​http://ww......
  • 纯前端根据JSON数据导出excel
     本文是草稿,具体文章内容待完善,如急需实现功能,可以加我好友告诉你vx:programmer-duan配置excel表头    配置字段  ......
  • java web开发(servlet传递数据给jsp)
        实际开发中,servlet多用于controller,jsp多用于view。之前,我们谈过了怎么把数据从jsp传递给servlet,即采用form+action的方法来完成这一目标。今天可以继续讨论下,s......
  • java web开发(jsp传递数据给servlet)
        有了servlet,有了jsp,其实就已经可以做很多的事情了。比如说表单的制作等等。在实际项目中,表单、表格都是很常见的输入选项。一个常见的场景,就是客户在输入数据之......
  • java web开发(第一个jsp工程)
        前面两期,我们谈到了怎么进行servlet的编写。一种方法是将传统的java工程改造成servlet工程;另外一种方法就是直接利用maven创建一个webapp工程。事实上呢,如果大......
  • vue js文字跑马灯基础版本
    1.html原生方法<marquee>123123</marquee>2.定时器方法letpaymentPromptText=document.getElementById('paymentPromptText');//文本的总宽度consttext......
  • 常用js库和框架(vue&element ui与webpy)
        编写前端代码的同学都知道,目前最火的前端代码是vue&elementui,而后端个人又比较喜欢用webpy,那么这两者是怎么配合的。现在都说要实现前后端分离,两者的json数据......
  • 常用js库和框架(three.js)
        three.js是web上面经常使用到的一个3d库。它在web领域里面的流行程度,有点类似于linux里面的opengl,windows里面的d3d。初学3d库,大家不要有什么畏难情绪,只要一步......
  • 常用js库和框架(ueditor)
        在前端开发的过程当中,文本的编辑一般都是少不了的。但是文本的编辑比较复杂,常常涉及到字体、图片、布局等很多内容。因此,有一个得心应手的editor编辑器是非常重......
  • 常用js库和框架(echarts)
    前端库,不管是饼图、柱状图,都可以很轻松的画出来。所需要的准备,就是把数据准备好就可以了。下面一个简单的例子来说明下,1、准备demo文件<head><metacharset="utf-8"/>......