Examples: Added Camera Input Demo

332c7bc3 · Mugen87 · 5dce6f08 · 332c7bc3 · 332c7bc3
隐藏空白更改
内联并排

Showing with 148 addition and 0 deletion

examples/files.js examples/files.js +1 -0

examples/webgl_materials_video_camera.html examples/webgl_materials_video_camera.html +147 -0

未找到文件。
--- a/examples/files.js
+++ b/examples/files.js
@@ -173,6 +173,7 @@ var files = {
 		"webgl_materials_variations_physical",
 		"webgl_materials_variations_toon",
 		"webgl_materials_video",
+		"webgl_materials_video_camera",
 		"webgl_materials_wireframe",
 		"webgl_mirror",
 		"webgl_mirror_nodes",

--- a/examples/webgl_materials_video_camera.html
+++ b/examples/webgl_materials_video_camera.html
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - materials - video - camera</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				background-color: #000;
+				color: #fff;
+				margin: 0px;
+				overflow: hidden;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+				font-weight: bold;
+				text-align:center;
+			}
+
+			a {
+				color:#0078ff;
+			}
+
+			#info {
+				color:#fff;
+				position: absolute;
+				top: 5px; width: 100%;
+				z-index:100;
+			}
+
+		</style>
+	</head>
+	<body>
+
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl video camera input
+		</div>
+
+		<script src="../build/three.js"></script>
+		<script src="../examples/js/controls/OrbitControls.js"></script>
+		<script src="js/Detector.js"></script>
+
+		<video id="video" autoplay style="display:none"></video>
+
+		<script>
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var camera, scene, renderer, video;
+
+			init();
+			animate();
+
+			function init() {
+
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
+				camera.position.z = 0.01;
+
+				scene = new THREE.Scene();
+
+				video = document.getElementById( 'video' );
+				var texture = new THREE.VideoTexture( video );
+				texture.minFilter = THREE.LinearFilter;
+				texture.magFilter = THREE.LinearFilter;
+				texture.format = THREE.RGBFormat;
+
+				var geometry = new THREE.PlaneBufferGeometry( 16, 9 );
+				geometry.scale( 0.5, 0.5, 0.5 );
+				var material = new THREE.MeshBasicMaterial( { map: texture } );
+
+				var count = 128;
+				var radius = 32;
+
+				var spherical = new THREE.Spherical();
+
+				for ( var i = 1, l = count; i <= l; i ++ ) {
+
+					var phi = Math.acos( - 1 + ( 2 * i ) / l );
+					var theta = Math.sqrt( l * Math.PI ) * phi;
+
+					spherical.set( radius, phi, theta );
+
+					var mesh = new THREE.Mesh( geometry, material );
+					mesh.position.setFromSpherical( spherical );
+					mesh.lookAt( camera.position );
+					scene.add( mesh );
+
+				}
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				document.body.appendChild( renderer.domElement );
+
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.enableZoom = false;
+				controls.enablePan = false;
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+				//
+
+				if ( navigator.mediaDevices && navigator.mediaDevices.getUserMedia ) {
+
+					var constraints = { video: { width: 1280, height: 720, facingMode: 'user' } };
+
+					navigator.mediaDevices.getUserMedia( constraints ).then( function( stream ) {
+
+							// apply the stream to the video element used in the texture
+
+							video.src = window.URL.createObjectURL( stream );
+							video.play();
+
+					} ).catch( function( error ) {
+
+						console.error( 'Unable to access the camera/webcam.', error );
+
+					} );
+
+				} else {
+
+					console.error( 'MediaDevices interface not avaiable.' );
+
+				}
+
+			 }
+
+			 function onWindowResize() {
+
+				 camera.aspect = window.innerWidth / window.innerHeight;
+				 camera.updateProjectionMatrix();
+
+				 renderer.setSize( window.innerWidth, window.innerHeight );
+
+			 }
+
+			 function animate() {
+
+				 requestAnimationFrame( animate );
+				 renderer.render( scene, camera );
+
+			 }
+
+		</script>
+
+	</body>
+</html>