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' );

			var save = document.getElementById( 'save' );
			save.addEventListener( 'click', function ( event ) {

				window.open( renderer.domElement.toDataURL( 'image/png' ), '_blank' );

			}, false );

			var init = function () {

				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
				camera.position.z = 500;

				scene = new THREE.Scene();

				texture = new THREE.Texture( video );
				texture.minFilter = THREE.LinearFilter;
				texture.magFilter = THREE.LinearFilter;
				texture.format = THREE.RGBFormat;
				texture.generateMipmaps = false;
				texture.needsUpdate = true;

				//

				var width = video.width;
				var height = video.height

				var triangles = width * height * 2;

				var geometry = new THREE.BufferGeometry();
				geometry.attributes = {
					index: {
						itemSize: 1,
						array: new Int16Array( triangles * 3 ),
						numItems: triangles * 3
					},
					position: {
						itemSize: 3,
						array: new Float32Array( triangles * 3 * 3 ),
						numItems: triangles * 3 * 3
					},
					uv: {
						itemSize: 2,
						array: new Float.........完整代码请登录后点击上方下载按钮下载查看