Skip to content

shadowmap 视频投影(视频融合)

将视频投影到模型上

引入插件

js
import ShadowMapVideo from './ShadowMapVideo.js'

添加模型&添加视频

添加模型

js
let model = new LSGlobe.LSPageLOD({
  url: '',
  shadows: LSGlobe.ShadowMode.DISABLED
})

添加视频

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>

销毁

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

示例代码 code

code示例地址

Released under the MIT License.