Is it possible to overlay a three.js scene onto an HTML video element?

A project I am working on involves developing an AR app that can display markers for North, East, South, and West using a smartphone camera. The goal is to create a scene with a transparent background that can be overlayed on a video feed from the camera.

Below is the 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);
    

Here is the HTML code:

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

Here is the CSS code:

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

Despite my research efforts, I have been unable to find a solution that works. I did come across a related question on Stack Overflow about changing the background in Three.js to transparent or a different color, but it didn't solve my issue. [Changing three.js background to transparent or other color]

As a beginner in three.js, I may not fully understand how it functions. Any assistance or guidance on this matter would be greatly appreciated.

Answer №1

Consider:

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

as well as:

renderer.setClearColor( 0x000000, 0 );

What do you think?

Answer №2

I finally figured out the issue.

Turns out, there was an additional canvas element placed below the video, which was hindering the video from appearing beneath 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>

After getting rid of the extra canvas, the scene is now transparent and I am able to see the webcam feed underneath.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Checkbox malfunctioning when trying to add values after being checked

I have successfully completed a calculation system project using JavaScript. Everything works well, the calculations are accurate and taxes are included properly. However, I am facing an issue where the tax is not being included when I click on the checkbo ...

What causes the first button to be clicked and the form to be submitted when the enter key is pressed within a text

Start by opening the javascript console, then place your cursor in the text box and hit enter. What is the reason for the function "baz" being called? How can this behavior be prevented? function foo() { console.log('foo'); } function bar() ...

Unravel the base64 encoded message from JavaScript and process it in Python

I'm currently facing an issue in Python while trying to decode a string sent by jQuery. Although I am not encountering any errors, I receive an encoding error when attempting to open the file. My objective is to decode the string in order to save it ...

How can AngularJS effectively parse JSON data containing HTML elements?

We are experiencing difficulties in reading a json file containing html content. Here is the code snippet with the json data we are working with: Json data: { "aboutContent": { "listItems": [{ "title": "Investors", "de ...

Exploring Beautiful Soup to extract child values based on their relationships with their siblings and parents

I'm having trouble extracting the text I-want-ya from: <div class="field"> <div class="labelx"><a class="clickme" href="#h_group123" rel="#h_group123" title="Group">* Group</a></div> <div class="input">I-want ...

Encountering an issue with React Native where initializing a project with npx leads to a "

Running the command: npx react-native init MyApp An error occurred while downloading and copying the template. Error message: Cannot find module 'C:\Users\%%%%\AppData\Local\Temp\rncli-init-template-rVvcjE\node_ ...

Creating a circular array of raycast directions with HTML Canvas 2D

I'm currently working on implementing raycasting in typescript with HTML Canvas 2D based on the tutorial from this video: https://youtu.be/TOEi6T2mtHo. However, I've encountered an issue where the rays being cast consistently point in a single di ...

Trouble with CSS solution for fixed header/columns in HTML table on Firefox

My current project involves implementing sticky headers/columns on a table for the client. Unfortunately, using a real script for this purpose is not feasible due to an already high object count on the page which is resulting in speed issues. However, I h ...

Loading bar for AngularJS material framework

Is there a way to integrate https://material.angularjs.org/latest/demo/progressLinear into my website so that it shows progress when a new view is loading? I'm trying to figure out how to obtain the value of the current page being loaded. Any suggest ...

Store the output of a MySQL query as a variable in JavaScript code

As I work on developing a discord bot, one area that I am focusing on involves implementing a database for certain functions. My current challenge revolves around creating a command that retrieves the names of all tables stored in the database. While I hav ...

Ways to retrieve JSON information and incorporate it into an if statement in this specific scenario

Here is the AJAX function code I have written: $('#request_form').submit(function(e) { var form = $(this); var formdata = false; if (window.FormData) { formdata = new FormData(form[0]); } var formAction = form.attr( ...

Tips for saving images in an S3 bucket

Within my express application, I currently save images to a directory in my repository. However, I am beginning to think that this approach may not be ideal and I am considering using AWS S3 as an alternative storage solution. Since I have never worked w ...

What is the regular expression that allows numbers between 1 and 24, including decimals?

Can anyone help me create a regex expression that only allows numbers between 1 and 24, with up to 2 decimal places? The numbers should range from 1 to 24, as well as include decimals like 1.00, 1.01, 1.02, all the way up to 24.99. ...

Toggle the selection of a div by clicking a button in AngularJS with a toggle function

I have several div elements on a webpage. Each div contains a button! When the button is clicked for the first time: The border color of the div will change to blue (indicating the div is now selected). The "ok" button will be hidden (leaving only t ...

Capturing keydown events exclusively in the topmost layer of the HTML document

Currently, I am developing a web application that includes an underlying HTML file with some JavaScript functionality that I cannot modify. In my code, I create a layer on top of this page using CSS with z-index: 1000;. However, I am facing an issue where ...

Retrieve a zip file using React and Node from a RESTful API

I have an application built with React and Node where I have a table that includes a download button. Clicking the download button triggers a request to my Node app, which in turn should call a REST API to download a zip file directly into the browser. In ...

A guide on retrieving all the table data and displaying it in the user interface using templates in Django

I am working on a Django project where I have created a model named "Files" with fields such as Id (auto-generated) and file_name. My goal is to retrieve all file names from the database and display them as a list on the user interface. To achieve this, I ...

Choosing an id of my preference to set as the value in the ng-options select list and ensuring proper binding with ng-model

When using Angular, I am trying to create a select list where the value corresponds to the actual id of an object. I want to bind this correctly with the ng-model directive. Here is my attempt: <select ng-model="selectedPersonId" ng-o ...

Having trouble with the filtering feature in Material UI Datagrid

I'm currently using Material UI Data Grid to display a table on my website. The grid has an additional filter for each column, but when I click on the filter, it hides behind my Bootstrap Modal. Is there a way to bring it to the front? https://i.stac ...

Alert: React-Weather is causing an invalid element type in React

I am feeling overwhelmed. I have created a custom component called react-weather which has been installed using npm. Here is the code snippet for my self-written Weather.js component located in the src/components folder: import React, { Component } from & ...