I am developing an HTML5 application that visualizes .fbx models. For the time being it just trivially renders the models on the default white scene (this: https://threejs.org/examples/#webgl_loader_fbx). I was wondering: is it possible to replace the scene with the webcam input (to obtain some sort of AR)? Does anyone know any scripts I could use? Thank you!
This is fairly simple to do, the following method should work with webcams and mobile cameras.
Add a video element to your html, <video></video>
, and make it the size of your ThreeJS renderer.
var video = document.querySelector('video'); //get the video element
// request media access. Requests the back facing camera on mobiles if it exists
navigator.mediaDevices.getUserMedia({video: { facingMode: "environment" } })
.then(function(stream) {
video.srcObject = stream; //set the source of the video element to the camera
video.onloadedmetadata = function(e) {
video.play(); //not sure if necessary, but plays the video element
};
})
.catch(function(err) {
console.log(err); //display any errors
});
}
This will ask the user for permission and only work if they accept. It will also only work on https secured websites.
You can read more about the media devices API here: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
If you want the video to be part of the actual scene, rather than a separate HTML element, have a look at this example:
https://threejs.org/examples/webgl_materials_video_webcam.html
Using the webcam input for real Augmented Reality is not possible. AR means that virtual objects are spatially registered within a limited representation of the real world. You can’t implement this with a simple video stream.
Related question on SO (warning: Russian segment, but the code snippet explains itself , just click “Выполнить код” to run it):