Enable direct assignment of VideoElement

Author: ma2yama

three.js/examples/location-based/index.js

@@ -22,6 +22,10 @@ function main() {
 
     const cam = new WebcamRenderer(renderer, '#video1');
 
+    // You can also set the video element directly
+    // const videoElement = document.querySelector('#video1');
+    // const cam = new WebcamRenderer(renderer, videoElement);
+
     const mouseStep = THREE.MathUtils.degToRad(5);
 
 

three.js/src/location-based/js/webcam-renderer.js

@@ -5,15 +5,20 @@ class WebcamRenderer {
     this.renderer = renderer;
     this.renderer.autoClear = false;
     this.sceneWebcam = new THREE.Scene();
-    let video;
-    if (videoElement === undefined) {
+    let video = undefined;
+
+    if (typeof videoElement === "string") {
+      video = document.querySelector(videoElement);
+    } else if (videoElement instanceof HTMLVideoElement) {
+      video = videoElement;
+    }
+
+    if (video === undefined) {
       video = document.createElement("video");
       video.setAttribute("autoplay", true);
       video.setAttribute("playsinline", true);
       video.style.display = "none";
       document.body.appendChild(video);
-    } else {
-      video = document.querySelector(videoElement);
     }
     this.geom = new THREE.PlaneGeometry();
     this.texture = new THREE.VideoTexture(video);