three获取摄像头并进行置换效果代码-html代码-BFW代码库

three获取摄像头并进行置换效果代码

代码语言：html

所属分类：其他

代码描述：three获取摄像头并进行置换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
	<head>

		<style>
			body {
				margin: 0;
				background-color: #000000;
				overflow: hidden;
			}

			input[type='range'] {
				-webkit-appearance: none;
				background: rgba(127,127,127,0.5);
				height: 10px;
			}

			input[type='range']::-webkit-slider-thumb {
				-webkit-appearance: none;
				background: rgba(255,255,255,1);
				height: 10px;
				width: 10px;
				cursor: pointer;
			}

			#slider {
				position: absolute;
				top: 40px;
				right: 40px;
			}

			#save {
				position: absolute;
				bottom: 40px;
				right: 40px;
				border: 0px;
				padding: 4px 8px;
				background: rgb(255,255,255);
				color: rgb(0,0,0);
				cursor: pointer;
			}

		</style>
	</head>
	<body>



		<input id="slider" type="range" min="-800" max="800" value="200">
		<input id="save" type="button" value="SAVE">

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.58.js"></script>

		<script id="vs" type="x-shader/x-vertex">

			uniform float amount;
			uniform sampler2D map;

			varying vec2 vUv;

			void main() {

				vUv = uv;

				vec4 color = texture2D( map, vUv );
				float value = ( color.r + color.g + color.b ) / 3.0;

				vec4 pos = vec4( position.xy, value * amount, 1.0 );

				gl_Position = projectionMatrix * modelViewMatrix * pos;

			}

		</script>

		<script id="fs" type="x-shader/x-fragment">

			uniform sampler2D map;

			varying vec2 vUv;

			void main() {

				gl_FragColor = texture2D( map, vUv );

			}

		</script>

		<script>

			// webcam

			var video = document.createElement( 'video' );
			video.width = 640;
			video.height = 480;
			
			var constraints = { video: { facingMode: 'user' } };
			navigator.mediaDevices.getUserMedia( constraints )
				.then( function ( stream ) {

					video.srcObject = stream;
					video.onloadedmetadata = function () {

						video.play();
						init();

					};

				} );

			//

			var camera, scene, material, renderer;

			var slider = document.getElementById( 'slider' ).........完整代码请登录后点击上方下载按钮下载查看