以相机为背景,同时以A帧显示对象

时间:2019-07-20 08:20:47

标签: three.js aframe

我想将摄像机视频源用作a帧中的背景,同时在其上覆盖对象。我知道有可能,但我不知道该怎么做。 所以我在这里寻求帮助!

2 个答案:

答案 0 :(得分:0)

您可以通过在场景之前添加元素来进行简单叠加:

<img src='overlay.jpg' />
<a-scene></a-scene>

提琴here


Here是一篇有关使用摄像机流的不错的文章,我只使用它的基本版本:

html

<video autoplay></video>
<a-scene></a-scene>

js

// grab the video element
const video = document.querySelector('video');
// this object needs to be an argument of getUserMedia
const constraints = {
   video: true
};
// when you grab the stream - display it on the <video> element
navigator.mediaDevices.getUserMedia(constraints).
    then((stream) => {video.srcObject = stream});

提琴here

答案 1 :(得分:0)

我把上面的例子变成了一个小故障,这样演示就可以在手机上运行了。我还修改了 aframe 示例代码,使其看起来像一场篮球比赛。

https://glitch.com/edit/#!/3dof-ar?path=index.html%3A33%3A33