@polygonjs/plugin-mapbox/dist/src/example.js

Mapbox plugin for the 3D engine https://polygonjs.com

import { Poly } from "@polygonjs/polygonjs/dist/src/engine/Poly";
import { PolyScene } from "@polygonjs/polygonjs/dist/src/engine/scene/PolyScene";
import { AllCamerasRegister } from "@polygonjs/polygonjs/dist/src/engine/poly/registers/cameras/All";
import { AllExpressionsRegister } from "@polygonjs/polygonjs/dist/src/engine/poly/registers/expressions/All";
AllCamerasRegister.run(Poly);
AllExpressionsRegister.run(Poly);
import { GeoObjNode } from "@polygonjs/polygonjs/dist/src/engine/nodes/obj/Geo";
import { AddSopNode } from "@polygonjs/polygonjs/dist/src/engine/nodes/sop/Add";
import { MaterialSopNode } from "@polygonjs/polygonjs/dist/src/engine/nodes/sop/Material";
import { TextSopNode } from "@polygonjs/polygonjs/dist/src/engine/nodes/sop/Text";
import { TransformSopNode } from "@polygonjs/polygonjs/dist/src/engine/nodes/sop/Transform";
import { CopySopNode } from "@polygonjs/polygonjs/dist/src/engine/nodes/sop/Copy";
import { MaterialsNetworkObjNode } from "@polygonjs/polygonjs/dist/src/engine/nodes/obj/MaterialsNetwork";
import { MaterialsNetworkSopNode } from "@polygonjs/polygonjs/dist/src/engine/nodes/sop/MaterialsNetwork";
import { MeshLambertMatNode } from "@polygonjs/polygonjs/dist/src/engine/nodes/mat/MeshLambert";
import { HemisphereLightObjNode } from "@polygonjs/polygonjs/dist/src/engine/nodes/obj/HemisphereLight";
Poly.registerNode(GeoObjNode);
Poly.registerNode(AddSopNode);
Poly.registerNode(MaterialSopNode);
Poly.registerNode(TextSopNode);
Poly.registerNode(TransformSopNode);
Poly.registerNode(CopySopNode);
Poly.registerNode(MaterialsNetworkObjNode);
Poly.registerNode(MaterialsNetworkSopNode);
Poly.registerNode(MeshLambertMatNode);
Poly.registerNode(HemisphereLightObjNode);
import { polyPluginMapbox } from "./index";
import { token } from "./ExampleData";
polyPluginMapbox.setToken(token);
Poly.registerPlugin(polyPluginMapbox);
const scene = new PolyScene();
const root = scene.root();
const mapboxCamera = root.createNode("mapboxCamera");
mapboxCamera.p.lngLat.set([148.9819, -35.3981]);
function createText() {
  const geo = root.createNode("geo");
  const text = geo.createNode("text");
  text.p.text.set("Polygonjs + Mapbox");
  const boxTransform = geo.createNode("transform");
  boxTransform.setInput(0, text);
  boxTransform.p.scale.set(100);
  const add = geo.createNode("add");
  const addTransform = geo.createNode("transform");
  addTransform.setInput(0, add);
  addTransform.p.t.x.set(mapboxCamera.pv.lngLat.x);
  addTransform.p.t.z.set(mapboxCamera.pv.lngLat.y);
  const mapboxTransform = geo.createNode("mapboxTransform");
  mapboxTransform.setInput(0, addTransform);
  mapboxTransform.p.mapboxCamera.setNode(mapboxCamera);
  const copy = geo.createNode("copy");
  copy.setInput(0, boxTransform);
  copy.setInput(1, mapboxTransform);
  const MAT = root.createNode("materialsNetwork");
  const meshLambert = MAT.createNode("meshLambert");
  const material = geo.createNode("material");
  material.setInput(0, copy);
  material.p.material.setNode(meshLambert);
  material.flags.display.set(true);
  window.text = text;
  window.boxTransform = boxTransform;
  window.scene = scene;
}
function createLights() {
  root.createNode("hemisphereLight");
}
async function buildScene() {
  setTimeout(() => {
    createLights();
    createText();
  }, 1e3);
  mapboxCamera.createViewer(document.getElementById("app"));
}
buildScene();