### Quick Start: Initialize Map and Three.js Scene

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/README.md

This example demonstrates the basic setup for integrating MapLibre GL JS with Three.js using the maplibre-three-plugin. Ensure Three.js is installed separately.

```html
<div id="map-container"></div>
```

```javascript
import maplibregl from 'maplibre-gl'
import * as THREE from 'three'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
import * as MTP from '@dvt3d/maplibre-three-plugin'

const map = new maplibregl.Map({
  container: 'map-container',
  style: 'https://api.maptiler.com/maps/basic-v2/style.json?key=get_access_key',
  zoom: 18,
  center: [148.9819, -35.3981],
  pitch: 60,
  canvasContextAttributes: { antialias: true },
  maxPitch: 85,
})

//init three scene
const mapScene = new MTP.MapScene(map)

//add light
mapScene.addLight(new THREE.AmbientLight())

// add model
const glTFLoader = new GLTFLoader()

glTFLoader.load('./assets/34M_17/34M_17.gltf', (gltf) => {
  let rtcGroup = MTP.Creator.createRTCGroup([148.9819, -35.39847])
  rtcGroup.add(gltf.scene)
  mapScene.addObject(rtcGroup)
})
```

--------------------------------

### Install maplibre-three-plugin with npm

Source: https://github.com/dvt3d/maplibre-three-plugin/wiki/Home

Install the plugin using npm. Ensure Three.js is installed separately.

```shell
npm install @dvgis/maplibre-three-plugin
```

--------------------------------

### Install maplibre-three-plugin with yarn

Source: https://github.com/dvt3d/maplibre-three-plugin/wiki/Home

Install the plugin using yarn. Ensure Three.js is installed separately.

```shell
yarn add @dvgis/maplibre-three-plugin
```

--------------------------------

### Install maplibre-three-plugin with npm

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/README.md

Use npm to install the maplibre-three-plugin package.

```shell
npm install @dvt3d/maplibre-three-plugin
```

--------------------------------

### Quick Start: Initialize Map and MapScene

Source: https://github.com/dvt3d/maplibre-three-plugin/wiki/Home

Initialize a MapLibre GL JS map and then create a MapScene instance from the plugin. Make sure MapLibre GL JS and its CSS are imported.

```javascript
import maplibregl from 'maplibre-gl'
import 'maplibre-gl/dist/maplibre-gl.css'
import { MapScene } from '@dvgis/maplibre-three-plugin'

const map = new maplibregl.Map({
  container: 'map', // container id
  style: 'https://demotiles.maplibre.org/style.json', // style URL
  center: [0, 0], // starting position [lng, lat]
  zoom: 1, // starting zoom
})
const mapScene = new MapScene(map)
```

--------------------------------

### Install maplibre-three-plugin with yarn

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/README.md

Use yarn to install the maplibre-three-plugin package.

```shell
yarn add @dvt3d/maplibre-three-plugin
```

--------------------------------

### CSS Styles for Point Example

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/examples/point.html

Defines full-screen layout constraints for the map container.

```css
point  * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow: hidden; } .map-container { width: 100%; height: 100%; overflow: hidden; }
```

--------------------------------

### Create a projected units per meter scale

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/README.md

Use SceneTransform.projectedUnitsPerMeter to get the scale factor for projected units per meter at a given latitude.

```javascript
const scale = new SceneTransform.projectedUnitsPerMeter(24)
```

--------------------------------

### Import MapLibre GL JS, Three.js, and Plugin

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/examples/index.html

This configuration object specifies the CDN paths for importing MapLibre GL JS, Three.js, and the maplibre-three-plugin. Ensure these paths are correct for your project.

```json
{ "imports": { "maplibre-gl": "https://cdn.jsdelivr.net/npm/maplibre-gl/+esm", "three": "https://cdn.jsdelivr.net/npm/three/build/three.module.min.js", "three/addons/": "https://cdn.jsdelivr.net/npm/three/examples/jsm/", "@dvt3d/maplibre-three-plugin": "../dist/index.js" } }
```

--------------------------------

### MapLibre Three.js Plugin Initialization

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/README.md

This section details the constructor for initializing the MapLibre Three.js plugin, including its parameters and configuration options.

```APIDOC
## MapLibre Three.js Plugin Initialization

### Description
Initializes the MapLibre Three.js plugin, allowing for the integration of Three.js scenes into MapLibre maps.

### Method
constructor

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **map** (Map) - Required - The MapLibre map instance.
- **options** (Object) - Optional - Configuration options for the plugin.
  - **scene** (THREE.Scene) - Optional - An existing THREE.Scene instance. If not provided, a default scene will be created.
  - **camera** (THREE.Camera) - Optional - An existing THREE.Camera instance. If not provided, a default camera will be created.
  - **renderer** (THREE.WebGLRenderer) - Optional - An existing THREE.WebGLRenderer instance. If not provided, a default renderer will be created.
  - **preserveDrawingBuffer** (boolean) - Optional - Whether to preserve the drawing buffer. Defaults to false.
  - **enablePostProcessing** (boolean) - Optional - Whether to enable post-processing rendering. Defaults to false.
  - **renderLoop** (function) - Optional - A custom frame render loop function. If not provided, the internal default render loop will be used.

### Request Example
```javascript
const map = new maplibregl.Map({
  container: 'map',
  style: 'your-style.json',
  center: [0, 0],
  zoom: 1
});

const plugin = new MaplibreThreeJsPlugin(map, {
  // custom options
});
```

### Response
#### Success Response (200)
N/A (Constructor does not return a value)

#### Response Example
N/A
```

--------------------------------

### Import Map Configuration

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/examples/3d-tiles-cesium-ion.html

Defines the necessary module paths for MapLibre, Three.js, and the 3D Tiles renderer plugin.

```json
{ "imports": { "maplibre-gl": "https://cdn.jsdelivr.net/npm/maplibre-gl/+esm", "three": "https://cdn.jsdelivr.net/npm/three/+esm", "three/examples/": "https://cdn.jsdelivr.net/npm/three/examples/", "three/addons/": "https://cdn.jsdelivr.net/npm/three/examples/jsm/", "3d-tiles-renderer": "https://cdn.jsdelivr.net/npm/3d-tiles-renderer/+esm", "3d-tiles-renderer/plugins": "https://cdn.jsdelivr.net/npm/3d-tiles-renderer/build/index.plugins.js", "@sparkjsdev/spark": "https://sparkjs.dev/releases/spark/2.1.0/spark.module.js", "@dvt3d/maplibre-three-plugin": "../dist/index.js" } }
```

--------------------------------

### Initialize MapScene Instance

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/README.md

Instantiate the MapScene class, which acts as the bridge between MapLibre GL JS and Three.js.

```javascript
const mapScene = new MapScene(map)
```

--------------------------------

### MaplibreThreePlugin Constructor

Source: https://github.com/dvt3d/maplibre-three-plugin/wiki/MapScene

Initializes the Maplibre GL JS Three.js plugin with a Map instance and optional configuration options.

```APIDOC
## MaplibreThreePlugin Constructor

### Description
Initializes the plugin with a Map instance and configuration options.

### Method
`constructor(map, [options])`

### Parameters
#### Path Parameters
- **map** (Map) - Required - The Map instance to integrate with.
- **options** (Object) - Optional - Configuration options for the plugin.

### Request Body
#### options (Object)
- **scene** (THREE.Scene) - Optional - The THREE.Scene to use. If not provided, a default scene will be created.
- **camera** (THREE.Camera) - Optional - The THREE.Camera to use. If not provided, a default camera will be created.
- **renderer** (THREE.WebGLRenderer) - Optional - The THREE.WebGLRenderer to use. If not provided, a default renderer will be created.
- **preserveDrawingBuffer** (boolean) - Optional - Whether to preserve the drawing buffer. Defaults to `false`.
- **renderLoop** (function) - Optional - A function to handle frame animation rendering. If not provided, a default function will be used. The function receives the plugin instance as a parameter.

### Request Example
```javascript
const map = new maplibregl.Map({
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json',
    center: [0, 0],
    zoom: 1
});

const plugin = new MaplibreThreePlugin(map, {
    antialias: true
});
```

### Response
This method does not return a value directly, but initializes the plugin instance.
```

--------------------------------

### Initialize CesiumWidget and Load 3D Tiles

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/examples/cesium-demo.html

Initializes the widget, configures scene settings, and loads a 3D Tileset with custom matrix transformations.

```javascript
const widget = new Cesium.CesiumWidget('cesiumContainer', { baseLayer: false, }) widget.scene.globe.show = false const {scene, camera} = widget scene.globe.depthTestAgainstTerrain = true scene.globe.enableLighting = false camera.setView({ destination: Cesium.Cartesian3.fromDegrees( 120.5853, 31.2989, 15000 ), orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-45), roll: 0, }, }) // 加载 3D Tiles async function loadTileset() { const tileset = await Cesium.Cesium3DTileset.fromUrl( 'http://localhost:8080/3d-tiles-ggy/tileset.json', { maximumScreenSpaceError: 16, maximumMemoryUsage: 1024, } ) const center = tileset.boundingSphere.center const transform = Cesium.Matrix4.multiply( Cesium.Matrix4.fromTranslation(center), Cesium.Matrix4.fromRotationTranslation( Cesium.Matrix3.fromRotationX( Cesium.Math.toRadians(90) ) ), new Cesium.Matrix4() ) const inverse = Cesium.Matrix4.fromTranslation( Cesium.Cartesian3.negate( center, new Cesium.Cartesian3() ) ) // tileset.modelMatrix = Cesium.Matrix4.multiply( // transform, // inverse, // new Cesium.Matrix4() // ) scene.primitives.add(tileset) await widget.flyTo(tileset) window.tileset = tileset } loadTileset() .catch(error => { console.error( '3D Tiles 加载失败:', error ) }) window.cesiumWidget = widget
```

--------------------------------

### Create a Sun object

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/README.md

Instantiate a Sun object to represent the sun in the scene. This object manages lighting and updates.

```javascript
const sun = new Sun()
```

--------------------------------

### MapLibre Three Plugin Constructor Options

Source: https://github.com/dvt3d/maplibre-three-plugin/wiki/MapScene

Configuration object for the MapLibre Three Plugin. Specifies Three.js scene, camera, renderer, and rendering loop.

```javascript
// config
{
    scene: null, //THREE.Scene，if not passed in, the default scene will be used
    camera:null, //THREE.Camera, if not passed in, the default camera will be used
    renderer: null, //THREE.WebGLRenderer if not passed in, the default renderer will be used
    preserveDrawingBuffer: false,
    renderLoop: (ins) =>{} //Frame animation rendering function, if not passed in, the default function will be used，the params is an instance for MapScene
}
```

--------------------------------

### MapLibre GL JS Three Plugin Constructor Options

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/README.md

Use these options to configure the Three.js integration with MapLibre GL JS. You can provide existing THREE.Scene, THREE.Camera, or THREE.WebGLRenderer instances, or let the plugin create defaults. Enabling preserveDrawingBuffer is useful for screenshots, while enablePostProcessing allows for advanced rendering effects.

```javascript
Object({
  // config
  /**
   * Existing THREE.Scene instance.
   * If not provided, an internal default scene will be created.
   */
  scene: null,

  /**
   * Existing THREE.Camera instance.
   * If not provided, an internal default camera will be created.
   */
  camera: null,

  /**
   * Existing THREE.WebGLRenderer instance.
   * If not provided, an internal default renderer will be created.
   */
  renderer: null,

  /**
   * Whether to preserve the drawing buffer.
   * When enabled, the canvas content will be retained after rendering,
   * which is useful for screenshots or readPixels operations.
   * Note: Enabling this may have a performance impact.
   */
  preserveDrawingBuffer: false,

  /**
   * Whether to enable post-processing rendering.
   * When enabled, Three.js content will be rendered through
   * an offscreen render target before being composited onto the map.
   * When disabled, Three.js renders directly into the shared MapLibre canvas
   * for maximum performance and stability.
   */
  enablePostProcessing: false,

  /**
   * Custom frame render loop.
   *
   * This function will be called every frame.
   * If not provided, the internal default render loop will be used.
   *
   * ⚠️ Note:
   * Providing a custom renderLoop means you take full control
   * of the render lifecycle. The built-in rendering pipeline
   * will be bypassed.
   *
   * As a result, the following internal event hooks will
   * NOT be triggered automatically:
   *
   * - preReset
   * - postReset
   * - preRender
   * - postRender
   *
   * If needed, you must manually call the corresponding logic
   * inside your custom renderLoop.
   *
   * @param {MapScene} ins - The current MapScene instance
   */
  renderLoop: (ins) => {
  }
})
```

--------------------------------

### Plugin Properties

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/README.md

Exposes key Three.js and MapLibre instances managed by the plugin.

```APIDOC
## Plugin Properties

### Description
These properties provide read-only access to the core Three.js and MapLibre objects managed by the plugin instance.

### Properties
- **map** (maplibregl.Map): The MapLibre map instance.
- **canvas** (HTMLCanvasElement): The HTML canvas element used by MapLibre.
- **camera** (THREE.Camera): The Three.js camera instance.
- **scene** (THREE.Scene): The Three.js scene instance.
- **lights** (THREE.Group): A Three.js group containing lights for the scene.
- **world** (THREE.Group): A Three.js group representing the 3D world.
- **renderer** (THREE.WebGLRenderer): The Three.js WebGL renderer instance.
- **composer** (EffectComposer): The Three.js EffectComposer instance, used for post-processing.
- **renderPass** (RenderPass): The Three.js RenderPass instance, part of the post-processing setup.
- **outputPass** (OutputPass): The Three.js OutputPass instance, used to render the final output.
```

--------------------------------

### Scene Management API

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/README.md

Methods for adding and removing lights and objects from the 3D scene, as well as controlling camera behavior.

```APIDOC
## Scene Management API

### Description
Methods for adding and removing lights and objects from the 3D scene, as well as controlling camera behavior.

### Methods

#### `_addLight(light)`

Add light to the scene. Supports custom light objects, but they must have a `delegate` property of type `THREE.Object3D`.

- **Parameters**
  - `light` (THREE.Object3D | Sun | CustomLight) - The light object to add.

- **Returns**
  - `this`

#### `_removeLight(light)`

Remove light from the scene.

- **Parameters**
  - `light` (THREE.Object3D | Sun | CustomLight) - The light object to remove.

- **Returns**
  - `this`

#### `_addObject(object)`

Add an object to the world. Supports custom objects, but they must have a `delegate` property of type `THREE.Object3D`.

- **Parameters**
  - `object` (THREE.Object3D | CustomObject) - The object to add.

- **Returns**
  - `this`

#### `_removeObject(object)`

Remove an object from the world.

- **Parameters**
  - `object` (THREE.Object3D | CustomObject) - The object to remove.

- **Returns**
  - `this`

#### `_flyTo(target, [completed], [duration])`

Fly the map to the provided target over a period of time. The completion callback will be triggered when the flight is complete. The target needs to contain the `position` property.

- **Parameters**
  - `target` (THREE.Object3D | CustomObject) - The target to fly to.
  - `completed` (Function) - Optional callback function to execute when the flight is complete.
  - `duration` (Number) - Optional duration of the flight in milliseconds.

- **Returns**
  - `this`

#### `_zoomTo(target, [completed])`

Zoom the map to the provided target.

- **Parameters**
  - `target` (Object) - The target to zoom to.
  - `completed` (Function) - Optional callback function to execute when the zoom is complete.

- **Returns**
  - `this`

#### `_on(type, callback)`

Registers an event listener for the specified event type.

- **Parameters**
  - `type` (String) - The type of event to listen for.
  - `callback` (Function) - The function to execute when the event is triggered.

- **Returns**
  - `this`

#### `_off(type, callback)`

Removes a previously registered event listener for the specified event type.

- **Parameters**
  - `type` (String) - The type of event to remove the listener from.
  - `callback` (Function) - The callback function to remove.

- **Returns**
  - `this`

#### `_layerBeforeTo([beforeId])`

Moves the three layer to a different z-position. If `beforeId` is omitted, the layer will be appended to the end of the layers array and appear above all other layers on the map.

- **Parameters**
  - `beforeId` (String) - Optional ID of the layer to place this layer before.

- **Returns**
  - `this`

#### `_addPass(pass)`

Adds a post-processing pass to the internal EffectComposer. The pass will be inserted before the final output pass to ensure correct rendering order.

- **Parameters**
  - `pass` (THREE.Pass) - The post-processing pass to add.

- **Returns**
  - `this`

#### `_removePass(pass)`

Removes a previously added post-processing pass from the internal EffectComposer.

- **Parameters**
  - `pass` (THREE.Pass) - The post-processing pass to remove.

- **Returns**
  - `this`
```

--------------------------------

### Creator Class API

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/README.md

Provides static methods for creating various 3D objects and groups within the scene.

```APIDOC
## Creator Class API

### Description
Provides static methods for creating various 3D objects and groups within the scene.

### Examples

```js
const rtcGroup = Creator.createRTCGroup([-1000, 0, 0])
```

### Static Methods

#### `_createRTCGroup(center, [rotation], [scale])`

Creates a new RTC (Real-Time Collaboration) group.

- **Parameters**
  - `center` (Array) - The center coordinates of the group.
  - `rotation` (Array) - Optional rotation of the group (default is [0,0,0]).
  - `scale` (Array) - Optional scale of the group, corresponding to the current latitude.

- **Returns**
  - `group` (THREE.Group) - The created RTC group.

#### `_createMercatorRTCGroup(center, [rotation], [scale])`

Creates a new Mercator RTC group.

- **Parameters**
  - `center` (Array) - The center coordinates of the group.
  - `rotation` (Array) - Optional rotation of the group (default is [0,0,0]).
  - `scale` (Array) - Optional scale of the group, corresponding to the current latitude.

- **Returns**
  - `group` (THREE.Group) - The created Mercator RTC group.

#### `_createShadowGround(center, [width], [height])`

Creates a shadow ground mesh.

- **Parameters**
  - `center` (THREE.Vector3) - The center of the ground mesh.
  - `width` (Number) - Optional width of the ground mesh (default is 100).
  - `height` (Number) - Optional height of the ground mesh (default is 100).

- **Returns**
  - `mesh` (THREE.Mesh) - The created shadow ground mesh.
```

--------------------------------

### CSS Layout Styles

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/examples/3d-tiles-cesium-ion.html

Basic CSS reset and container styling for the map application.

```css
* { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow: hidden; } .map-container { width: 100%; height: 100%; overflow: hidden; }
```

--------------------------------

### Create an RTCGroup

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/README.md

Use Creator.createRTCGroup to create a Three.js Group that is relative to a center point. This is useful for large-scale 3D scenes.

```javascript
const rtcGroup = Creator.createRTCGroup([-1000, 0, 0])
```

--------------------------------

### Event Hooks

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/README.md

Details on the event hooks available for custom rendering logic when using the internal render loop.

```APIDOC
## Event Hooks

### Description
These hooks are triggered during the rendering cycle when the internal render loop is active. They allow for custom logic to be injected before or after specific rendering stages.

### Event Hooks
- **preReset**: Called before `renderer.resetState`.
- **postReset**: Called after `renderer.resetState`.
- **preRender**: Called before `renderer.render`.
- **postRender**: Called after `renderer.render`.

**Note**: These hooks are only triggered when the plugin's internal render loop is used. If a custom `renderLoop` is provided, these hooks will not be called automatically, and manual invocation of corresponding logic is required.
```

--------------------------------

### SceneTransform API

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/README.md

Utilities for transforming coordinates and calculating projected units within the 3D scene.

```APIDOC
## SceneTransform API

### Description
Utilities for transforming coordinates and calculating projected units within the 3D scene.

### Examples

```js
const scale = SceneTransform.projectedUnitsPerMeter(24)
```

### Static Methods

#### `_projectedMercatorUnitsPerMeter()`

Calculates the number of projected Mercator units per meter.

- **Returns**
  - `value` (Number) - The number of projected Mercator units per meter.

#### `_projectedUnitsPerMeter(lat)`

Calculates the number of projected units per meter at a given latitude.

- **Parameters**
  - `lat` (Number) - The latitude.

- **Returns**
  - `value` (Number) - The number of projected units per meter.

#### `_lngLatToVector3(lng, [lat], [alt])`

Converts longitude, latitude, and altitude to a `THREE.Vector3`.

- **Parameters**
  - `lng` (Array | Number) - The longitude.
  - `lat` (Number) - The latitude.
  - `alt` (Number) - The altitude.

- **Returns**
  - `v` (THREE.Vector3) - The resulting vector.

#### `_vector3ToLngLat(v)`

Converts a `THREE.Vector3` to longitude and latitude.

- **Parameters**
  - `v` (THREE.Vector3) - The vector to convert.

- **Returns**
  - `value` (Array) - An array containing the longitude and latitude.
```

--------------------------------

### MaplibreThreePlugin Properties

Source: https://github.com/dvt3d/maplibre-three-plugin/wiki/MapScene

Exposes read-only properties of the MaplibreThreePlugin instance.

```APIDOC
## MaplibreThreePlugin Properties

### Description
These are the read-only properties available on an instance of the MaplibreThreePlugin.

### Properties
- **map** (Map) - The Map instance associated with this plugin.
- **canvas** (HtmlElement) - The HTML canvas element used by the Map instance.
- **scene** (THREE.Scene) - The THREE.Scene instance used by the plugin.
- **camera** (THREE.Camera) - The THREE.Camera instance used by the plugin.
- **renderer** (THREE.WebGLRenderer) - The THREE.WebGLRenderer instance used by the plugin.
- **world** (THREE.Group) - A THREE.Group container for 3D objects. All created 3D objects, except lights, should be added to this group for correct rendering.
```

--------------------------------

### lngLatToVector3

Source: https://github.com/dvt3d/maplibre-three-plugin/wiki/SceneTransform

Converts longitude, latitude, and altitude to a THREE.Vector3.

```APIDOC
## lngLatToVector3(lng, lat, alt)

### Description
Converts longitude, latitude, and altitude to a THREE.Vector3 object.

### Method
N/A (Utility Function)

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **lng** (Number) - Required - The longitude.
- **lat** (Number) - Required - The latitude.
- **alt** (Number) - Required - The altitude.

### Response
#### Success Response (200)
- **Vector3** - A THREE.Vector3 object representing the converted coordinates.

### Response Example
```json
{
  "x": 0,
  "y": 0,
  "z": 0
}
```
```

--------------------------------

### CSS Layout for Map Container

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/examples/shadow.html

Sets the full-screen layout for the map container and resets default browser margins.

```css
* { padding: 0; margin: 0; } html, body { width: 100%; height: 100%; overflow: hidden; } .map-container { width: 100%; height: 100%; overflow: hidden; }
```

--------------------------------

### Sun Class API

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/README.md

Represents and manages the sun in the 3D scene, including its light properties.

```APIDOC
## Sun Class API

### Description
Represents and manages the sun in the 3D scene, including its light properties.

### Examples

```js
const sun = new Sun()
```

### Creation

#### constructor()

Initializes a new Sun instance.

### Properties

- **`delegate`** (THREE.Group): Readonly. The delegate object for the sun.
- **`castShadow`** (Boolean): Whether the sun casts shadows.
- **`currentTime`** (Date | String): The current time, affecting the sun's position.
- **`sunLight`** (THREE.DirectionalLight): Readonly. The directional light representing the sun.
- **`hemiLight`** (THREE.HemisphereLight): Readonly. The hemisphere light simulating ambient sky light.

### Methods

#### `_update(frameState)`

Updates the sun's position and lighting based on the current frame state.

- **Parameters**
  - `frameState` (Object) - An object containing information about the current frame.

- **Returns**
  - `this`
```

--------------------------------

### vector3ToLngLat

Source: https://github.com/dvt3d/maplibre-three-plugin/wiki/SceneTransform

Converts a THREE.Vector3 to longitude, latitude, and altitude.

```APIDOC
## vector3ToLngLat(v3)

### Description
Converts a THREE.Vector3 object to longitude, latitude, and altitude.

### Method
N/A (Utility Function)

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **v3** (THREE.Vector3) - Required - The THREE.Vector3 object to convert.

### Response
#### Success Response (200)
- **Object** - An object containing the longitude, latitude, and altitude.

### Response Example
```json
{
  "lng": 0,
  "lat": 0,
  "alt": 0
}
```
```

--------------------------------

### CSS Styles for Div Icons

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/examples/div-icon.html

Defines the layout and visual appearance for div icon elements within the map container.

```css
* { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow: hidden; } .map-container { width: 100%; height: 100%; overflow: hidden; } .div-icon { background: #02b4da; padding: 5px 5px; border-radius: 4px; color: #fff; }
```

--------------------------------

### CSS Reset for 3D Splatting

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/examples/3d-gs-multi-splats.html

Basic CSS reset to ensure the 3D canvas occupies the full viewport without margins or padding.

```css
* { margin: 0; padding: 0; }
```

--------------------------------

### CSS Styles for Billboard Container

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/examples/billboard.html

Defines the layout for the map container and resets default browser margins.

```css
billboard  * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow: hidden; } .map-container { width: 100%; height: 100%; overflow: hidden; }
```

--------------------------------

### CSS Layout for 3D Map Container

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/examples/3d-gs-spark.html

Defines the full-screen layout for the map container to ensure proper rendering of the 3D scene.

```css
3dgs ply  * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow: hidden; } .map-container { width: 100%; height: 100%; overflow: hidden; }
```

--------------------------------

### projectedUnitsPerMeter

Source: https://github.com/dvt3d/maplibre-three-plugin/wiki/SceneTransform

Calculates the number of projected units per meter at a given latitude.

```APIDOC
## projectedUnitsPerMeter(lat)

### Description
Calculates the number of projected units per meter at a given latitude.

### Method
N/A (Utility Function)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **lat** (Number) - Required - The latitude at which to calculate the units per meter.

### Response
#### Success Response (200)
- **Number** - The number of projected units per meter.

### Response Example
```
1.0
```
```

--------------------------------

### CSS Styles for Cesium Container

Source: https://github.com/dvt3d/maplibre-three-plugin/blob/main/examples/cesium-demo.html

Ensures the Cesium container occupies the full viewport without overflow.

```css
html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.