FBX

Example

Example Source Code

<template>
  <div style="height: 500px" class="vw-full vh-full">
    <div style="height: 400px">
      <mb-map
        :zoom="16"
        :center="mapCenter"
        :bearing="0"
        :pitch="45"
        @created="createdHandler"
      >
        <mb-tianditu-layer />
      </mb-map>
    </div>
  </div>
</template>
<script setup lang="ts">
import * as THREE from 'three'
// @ts-ignore
import { FBXLoader } from 'three/addons/loaders/FBXLoader.js'
import type { MapboxInstance } from '@mapbox-vue3/core'

const mapCenter = [116.3466, 39.8704]
let map: MapboxInstance
let mixers: THREE.AnimationMixer[] = []
let clock = new THREE.Clock()

const createdHandler = (mapbox: MapboxInstance) => {
  map = mapbox
  mixers = []
  clock = new THREE.Clock()
  loaderModels()
}
const loaderModels = () => {
  const loader = new FBXLoader()
  loader.load(`${__RESOURCE_URL__}fbx/Samba Dancing.fbx`, (dancer) => {
    dancer.scale.multiplyScalar(4)
    dancer.rotation.x = Math.PI * 1.5
    const mixer = new THREE.AnimationMixer(dancer)
    const action = mixer.clipAction(dancer.animations[0])
    action.play()

    mixers.push(mixer)

    addThreeLayer(dancer)
  })
}
const addThreeLayer = (dancer) => {
  const threeLayer = new map.mapboxgl.supermap.ThreeLayer('threeLayer')
  threeLayer.on('initialized', render)

  let light: THREE.PointLight
  function render() {
    const renderer = threeLayer.getThreeRenderer(),
      scene = threeLayer.getScene(),
      camera = threeLayer.getCamera()

    light = new THREE.PointLight(0xffffff, 0.8)
    light.position.copy(camera.position)
    scene.add(light)
    scene.add(new THREE.AmbientLight(0xffffff))

    threeLayer.setPosition(dancer, mapCenter)

    scene.add(dancer)
    ;(function animate() {
      const delta = clock.getDelta()
      for (const mixer of mixers) {
        mixer.update(delta)
      }
      renderer.render(scene, camera)

      requestAnimationFrame(animate)
    })()
  }

  // 均匀光照，与相机位置同步
  // Even lighting, synchronized with camera position
  threeLayer.on('render', () => {
    light && light.position.copy(threeLayer.renderer.camera.position)
  })
  map.addLayer(threeLayer)
}
</script>