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' ).........完整代码请登录后点击上方下载按钮下载查看
网友评论0