shadowmap 视频投影（视频融合）

将视频投影到模型上

引入插件

import ShadowMapVideo from './ShadowMapVideo.js'

添加模型&添加视频

添加模型

try {
  const url = '';
  let tileset = await LSGlobe.LSPageLOD.fromUrl(url, {
    shadows: LSGlobe.ShadowMode.DISABLED
  })
  viewer.scene.primitives.add(tileset);
} catch (error) {
  console.log(`Error loading LSPageLOD: ${error}`)
}

添加视频

js

//开启深度检测
LSGlobe.ViewerSources.ShadowMapVideoGlobe.scene.globe.depthTestAgainstTerrain = true
LSGlobe.shadowMapVideo = new ShadowMapVideo(
  LSGlobe,
  LSGlobe.Viewer, //当前viewer
  {
    type: 3,
    url: 'trailer', //video元素的id;
    position: {
      x: 120.42819203327814,
      y: 31.32524096346179,
      z: 21.562915555482682
    },
    rotation: {
      x: -15,
      y: -130,
      z: 0
    },
    fov: 74,
    far: 75,
    near: 1,
    aspectRatio: 1,
    alpha: 0.8,
    debugFrustum: true //显示视锥体
    // maskImg: this.maskImg
  }
)

html

<video
  id="trailer"
  muted=""
  autoplay=""
  loop=""
  crossorigin=""
  controls=""
  style="z-index: 1;"
>
  <source src="" type="video/mp4" />
  Your browser does not support the <code>video</code> element.
</video>

销毁

LSGlobe.shadowMapVideo.destroy()
LSGlobe.shadowMapVideo = undefined

示例代码 code

code示例地址