GltfLayer

Example

Example Source Code

import React, { useEffect, useRef, useState } from 'react'
import ReactDOM from 'react-dom'
import { MbMap, MbTiandituLayer } from '@mapbox-react/core'
import { MbGltfLayer } from '@mapbox-react/deck-layers'

const App = () => {
  const [mapCenter] = useState([116, 39])
  const [zoom, setZoom] = useState(18)
  const [pitch, setPitch] = useState(60)
  const mapInst = useRef<any>()

  return (
    <div className="map-wrapper">
      <MbMap ref={mapInst} center={mapCenter} zoom={zoom} pitch={pitch}>
        <MbTiandituLayer types={['vec']} />
        <MbGltfLayer
          gltfUrl="https://mapbox-web.github.io/mapbox-react/gltf/GroundVehicle/GroundVehicle.glb"
          data={[{ position: [116, 39] }]}
          getOrientation={[0, 45, 90]}
          sizeScale={10}
        />
      </MbMap>
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector('#root'))

API

PROPS

Name	Description	Type	Default
id	Layer ID. A unique identifier for the layer.	string	-
gltfUrl	URL of the glTF model. This specifies the location of the 3D model file.	string	-
autoHighlight	When this property is true and pickable is also true, the object under the mouse cursor will be highlighted. This provides visual feedback when hovering over interactive elements.	boolean	false
data	Source data for the layer. This can be a string representing a URL, an object, an array, or a Promise that resolves to data. This data is often used in conjunction with accessor functions (like get-position, get-scale, etc.) to dynamically position and style the models.	string / IndexAny / AnyArr / Promise<any>	''
getOrientation	Orientation of the model. This can be an array of Euler angles (e.g., [rotationX, rotationY, rotationZ] in degrees) or a function that returns the orientation based on the data. The default is [0, 0, 90], which might represent a rotation around the Z-axis by 90 degrees.	number[] / AnyNumbersFunc	[0, 0, 90]
getPosition	Function to retrieve the position of each model instance. This function should accept a data item as an argument and return an array representing the [longitude, latitude] or [longitude, latitude, altitude/elevation].	AnyFunc	-
getScale	Scaling factor for the model. This can be an array of scaling factors for each axis (e.g., [scaleX, scaleY, scaleZ]) or a function that returns the scale based on the data. The default is [1, 1, 1], meaning no scaling.	number[] / AnyNumbersFunc	[1, 1, 1]
getTranslation	Translation (offset) of the model. This can be an array representing the translation along each axis (e.g., [translateX, translateY, translateZ]) or a function that returns the translation based on the data. The default is [0, 0, 0], meaning no translation.	number[] / AnyNumbersFunc	[0, 0, 0]
highlightColor	The color to blend with the original color of the highlighted object. This creates the highlight effect. The value can be a color string or an RGBA array (e.g., [R, G, B, A] where R, G, B, and A are values between 0 and 255).	string / number[]	[255, 255, 128, 1]
highlightedObjecIndex	The index of the currently highlighted object within the data. A value of -1 indicates that no object is currently highlighted.	number	-1
opacity	The opacity of the model (0-1). 0 is fully transparent, and 1 is fully opaque.	number	1
pickable	Whether the layer responds to mouse events. If false, the component will not emit mouse-related events (e.g., click, hover).	boolean	false
sizeScale	A global scaling factor applied to the model's size. This is useful for uniformly scaling all instances of the model.	number	1
show	Whether the layer is visible. If true, the layer will be rendered; otherwise, it will be hidden.	boolean	true
animations	Animation configuration for the gltf model. This is an object where you can specify animation parameters, such as speed. The structure of this object may depend on the specific animation library or implementation being used.	IndexAny	{ speed: 5 }

EVENTS

Name	Description	Parameters
onCreated	Initialization complete event	-
onMouseMove	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }
onMouseLeave	-	-
onClick	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }

METHODS

Name	Description	Definition