Question

我正在尝试制作一个AR应用程序，通过电话摄像头放置北，东，南和西标记。我想用透明背景渲染一个场景，该场景覆盖电话摄像头的视频元素。

渲染器代码（scene.js）：

var scene = new THREE.Scene(),
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000),
    renderer = new THREE.WebGLRenderer({ alpha: true });

renderer.setClearColor( 0x000000, 1 );
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

HTML：

<DOCTYPE html>
    <html>

    <head>
        <link rel="stylesheet" type="text/css" href="../css/style.css">
    </head>

    <body style='margin : 0px; overflow: hidden;'>

        <video id='video' width='100%' autoplay></video>
        <canvas id='canvas' width='100%' height='100%'></canvas>
        <div id="sliderContainer" class="slidecontainer">
            <input type="range" min="0" max="359" value="1" class="slider" id="myRange">
            <p id="sliderOut">0</p>
        </div>

        <script src="../js/three.js"></script>
        <script src="../js/scene.js"></script>
        <script src="../js/deviceCoords.js"></script>
        <script src="../js/location.js"></script>
        <script src="../js/maths.js"></script>
        <script src="../js/video.js"></script>
        <script src="../js/main.js"></script>


    </body>

    </html>

CSS：

    body {
        margin: 0;
    }

    canvas {
        width: 100%;
        height: 100%
    }

    #sliderContainer {
        position: absolute;
        z-index: 1;
        width: 100%;
        margin-top: 20%;
    }

    .slider {
        width: 80%;
    }

    #sliderOut {
        color: chartreuse;
    }

    #video {
        position: absolute;
        width: 100%;
        z-index: -10;
    }

我尝试研究此问题，但发现的所有内容似乎都无法正常运行。例如类似的问题：Changing three.js background to transparent or other color

我是Three.js的新手，所以我可能会误解它的工作原理。

任何帮助将不胜感激。

Answer 1

尝试：

renderer =新的THREE.WebGLRenderer（{alpha：true，preserveDrawingBuffer：true}）;

和：

renderer.setClearColor（0x000000，0）;

？

Answer 2

我发现出了什么问题。

我在视频下面有一个额外的canvas元素，该元素阻止了视频显示在three.js场景下。

<video id='video' width='100%' autoplay></video>
<!--Canvas element that was blocking scene-->
    <canvas id='canvas' width='100%' height='100%'></canvas>

    <div id="sliderContainer" class="slidecontainer">
        <input type="range" min="0" max="359" value="1" class="slider" id="myRange">
        <p id="sliderOut">0</p>
    </div>

现在，移除多余的画布后，场景是透明的，我现在可以在下面查看网络摄像头。

有没有一种方法可以在html视频元素上渲染Three.js场景？

2 个答案: