CODEWITHSUNDEEP
javascripthtmlcssthree.jsaugmented-reality
Nic Hooper
Nic Hooper

Reputation: 133

Is there a way to render a three.js scene over a html video element?

I am trying to make an AR app that places North, East, South and West markers through a phone camera. I want to render a scene with a transparent background that overlays a video element of the phone camera.

Renderer code (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;
    }

I have tried researching this but everything I've found hasn't seemed to work. For instance a similar question: Changing three.js background to transparent or other color

I am new to three.js so I may be misunderstanding how it works.

Any help would be greatly appreciated.

Upvotes: 1

Views: 2477

Answers (2)

Nic Hooper
Nic Hooper

Reputation: 133

I found what was going wrong.

I had an extra canvas element under the video that was blocking the video from showing underneath the three.js scene.

<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>

The scene is now transparent after removing the extra canvas and I can now view the webcam feed below.

Upvotes: 0

manthrax
manthrax

Reputation: 5016

Try:

renderer = new THREE.WebGLRenderer({ alpha: true, preserveDrawingBuffer:true });

and:

renderer.setClearColor( 0x000000, 0 );

?

Upvotes: 0

Related Questions