Three Object

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'
import type { MapboxInstance } from '@mapbox-vue3/core'

const mapCenter = [116.3466, 39.8704]
let map: MapboxInstance

const createdHandler = (mapbox: MapboxInstance) => {
  map = mapbox
  loaderModels()
}

const loaderModels = () => {
  const geometry = new THREE.PlaneGeometry(300, 300)
  const material = new THREE.MeshBasicMaterial({
    map: new THREE.TextureLoader().load(
      `${__RESOURCE_URL__}images/firefox.png`
    ),
    transparent: true,
    // color: 0xffff00,
    side: THREE.DoubleSide,
  })
  const plane = new THREE.Mesh(geometry, material)
  plane.rotation.x = -Math.PI / 2
  plane.name = 'plane'

  const cube = new THREE.Mesh(
    new THREE.BoxGeometry(300, 300, 300),
    new THREE.MeshNormalMaterial()
  )
  cube.name = 'cube'

  const cube1 = cube.clone()
  cube1.material = new THREE.MeshNormalMaterial()
  cube1.name = 'cube1'

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

  let light
  function render() {
    const renderer = threeLayer.getThreeRenderer(),
      scene = threeLayer.getScene(),
      camera = threeLayer.getCamera()
    // scene.background = new THREE.Color('skyblue')
    light = new THREE.PointLight(0xffffff, 0.8)
    light.position.copy(camera.position)
    scene.add(light)
    scene.add(new THREE.AmbientLight(0xffffff))

    threeLayer.setPosition(plane, mapCenter)
    threeLayer.setPosition(cube, mapCenter)
    threeLayer.setPosition(cube1, mapCenter)

    plane.translateY(340)
    cube.translateX(800)
    scene.add(plane)
    scene.add(cube)
    scene.add(cube1)

    renderer.render(scene, camera)
  }

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