1

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.

a stone arachnid
  • 1,272
  • 1
  • 15
  • 27
Nic Hooper
  • 133
  • 7
  • Have a look at this [forum post](https://discourse.threejs.org/t/webcam-as-scene-of-fbx-3d-model/4683/5?u=prisoner849) – prisoner849 Nov 26 '18 at 13:48
  • Ok, so on the forum Mugen87 (moderator) states that it isn't possible. Perhaps I need to explore alternatives such as AR.js. – Nic Hooper Nov 26 '18 at 14:10
  • Have you had a look at the question from the Russian segment and the code snippet from its answer (that I've mentioned in that forum thread)? – prisoner849 Nov 26 '18 at 14:31
  • My apologies, I didn't see that at first. I have looked at that three.js example and code before and even used it to create my own version on my project however I would need to re-position the video object for each different screen the app ran on. – Nic Hooper Nov 26 '18 at 14:41
  • I am just trying to make the background of the scene transparent so I can display a video element beneath. – Nic Hooper Nov 26 '18 at 14:42

2 Answers2

0

Try:

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

and:

renderer.setClearColor( 0x000000, 0 );

?

manthrax
  • 4,918
  • 1
  • 17
  • 16
  • Thanks for the quick reply. Just tried your code and still nothing. I just get a white background. Editing the page through chrome dev tools shows me that both the video elements and threejs scene are functioning, just the threejs scene isn't transparent. – Nic Hooper Nov 26 '18 at 14:01
  • OH! One other gotcha that got me recently.. Make sure there is NO background attribute being applied to your canvas. even perhaps explicitly set canvas.style.background="" in startup... let me know if that helps... – manthrax Nov 26 '18 at 14:08
  • I edited the background element through chrome dev tools while the site was running and there was no change again. Still a white background. – Nic Hooper Nov 26 '18 at 14:15
0

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.

Nic Hooper
  • 133
  • 7