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.