您可以尝试使用以下CSS样式来调整视频元素的大小和定位,以适应屏幕大小:
video {
width: 100%;
height: 100%;
object-fit: cover;
}
在AR.js中,您可以通过在THREEx.ArMarkerControls中注册元素来添加视频元素,并将其与元素ID一起传递:
//将video元素注册到AR.js
this.video = document.getElementById('videoElement');
this.renderer.domElement.parentElement.appendChild(this.video);
this.video.setAttribute('id', 'video');
//将video元素与标记关联
markerRoot.add(this.video);
使用这些CSS样式和代码示例可以解决AR.js视频元素溢出屏幕尺寸的问题。