What is the reason why HTML mesh always has a gray plane without images?

Questions
1

image
image820×456 36.9 KB

  this.engine = new BABYLON.Engine(canvas)
    this.scene = new BABYLON.Scene(this.engine)
    this.scene.clearColor = new BABYLON.Color4(0, 0, 0, 0)
    this.scene.createDefaultCameraOrLight(true, true, true)
    const activeCamera = this.scene.activeCamera! as BABYLON.ArcRotateCamera
    activeCamera.lowerBetaLimit = Math.PI * 0.6
    activeCamera.upperBetaLimit = Math.PI * 0.6
    this.engine.runRenderLoop(() => {
      this.scene!.render()
    })
    const htmlMeshRenderer = new ADDONS.HtmlMeshRenderer(this.scene)
    const _video = document.createElement('video')
    _video.src = 'https://media.w3.org/2010/05/sintel/trailer.mp4'
    _video.muted = true
    _video.autoplay = true
    _video.controls = true
    _video.width = 30
    _video.height = 20
    _video.style.color = 'red'
    _video.style.width = '30px'
    _video.style.height = '20px'
    const transformNode = new BABYLON.TransformNode(`video-parent-${video.id}`, this.scene)
    const htmlMeshDiv = new ADDONS.HtmlMesh(this.scene, `point-video-${video.id}`, {
      isCanvasOverlay: true,
      // fitStrategy: ADDONS.FitStrategy.COVER
    })
    htmlMeshDiv.setContent(_video, 4, 2)
    htmlMeshDiv.position = new BABYLON.Vector3(video.position.x, video.position.y, video.position.z)
    htmlMeshDiv.renderingGroupId = 1
2

Hi dalidaliW, from the code snippet is difficult understand the reason why the plane is gray (for instance the variable video is missing). I put your code in a playground, cleaned it up and the video is correctly shown:

Does it help? Otherwise share your playground and we can take a look :slight_smile:

3

After testing and distribution, the same code works fine in the playground, but using import * as BABYLON from ‘@ babylonjs/core’
Import * as ADDONS from ‘@ babylonjs/addons/htmlMesh/index’ cannot function properly