【问题标题】:Three js add video to plane geometry三个js添加视频到平面几何
【发布时间】:2025-11-28 21:55:01
【问题描述】:

我正在尝试用三个 js 将视频显示为平面几何图形,但我得到的只是一个黑色矩形。

var video = document.getElementById('video');
var texture = new THREE.VideoTexture(video);
texture.needsUpdate;
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
texture.crossOrigin = 'anonymous';

var imageObject = new THREE.Mesh(
    new THREE.PlaneGeometry(width, height),
    new THREE.MeshBasicMaterial({ map: texture }),);

scene.add( imageObject );

添加:

video.src = "src to video";
video.load();
video.play();

并且有效!

【问题讨论】:

  • 你什么时候开始玩video
  • 无处,我在 html 的标签视频中设置了“自动播放”。我认为这就是问题
  • 你可以提供更多信息和代码。
  • Html 视频标签:<video id="video" autoplay loop webkit-playsinline style="display:none"></video> 我已经添加了在您链接的页面中找到的功能,现在可以使用。谢谢!
  • 可能是因为你没有放<source>标签。

标签: video three.js geometry plane


【解决方案1】:

解决办法,添加这段代码:

video.src = "src to video";
video.load();
video.play();

【讨论】: