Layer3D

Layer 3D Component

Props

Name	Type	Description
origin	object [x: number, y:number, z:number]	The origin of the 3D model
babylon	boolean	Flag to indicate using BabylonJS otherwise ThreeJS library
defaultLight	boolean	Add default light to scene
onAdd	function	Function to create the scene after layer is added
onRender	function	Function to implement functionality on each render cycle

*required

Example

import { Component, createSignal } from "solid-js";
import MapGL, { Viewport, Layer3D } from "solid-map-gl";
import 'mapbox-gl/dist/mapbox-gl.css';
import { SceneLoader } from '@babylonjs/core/Loading';
import '@babylonjs/loaders';

const [viewport, setViewport] = createSignal({
  center: [148.9819, -35.3981],
  zoom: 18,
  pitch: 60,
} as Viewport);

const App: Component = () => (
  <MapGL
    options={{ style: 'mb:light', antialias: true }}
    viewport={viewport()}
    onViewportChange={(evt: Viewport) => setViewport(evt)}
  >
    <Layer3D
      babylon
      defaultLight
      origin={[148.9819, -35.39847]}
      onAdd={(scene) => {
        SceneLoader.LoadAssetContainerAsync(
          'https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/',
          '34M_17.gltf',
          scene
        ).then((modelContainer: any) => modelContainer.addAllToScene());
      }}
    />
  </MapGL>
);