반응형
=================================
=================================
=================================
출처: http://cinema4dr12.tistory.com/953
[Programming / WebGL] Web Cam Texture
WebGL 프레임웍인 three.js의 Extension인 threejs-extension을 이용하여 Web Cam으로부터 받은 화면을 텍스쳐로 적용하는 예제이다.
예제 파일 다운로드 :
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <link rel="stylesheet" href="./style.css"/> <title>WebCam Texture</title> </head> <body> <div id="render"></div> </body> <script src='./three.min.js'></script> <script src='./threex.webcamtexture.js'></script> <script src='./main.js'></script> </html>
CSS [style.css]
#render { margin: 0px; background-color: #836b2c; overflow: hidden; width: 100%; height: 100%; }
JavaScript [main.js]
var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.getElementById( "render" ).appendChild( renderer.domElement ); var onRenderFcts = []; var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 100 ); camera.position.z = 3; ////////////////////////////////////////////////////////////////////////////////// // add an object and make it move // ////////////////////////////////////////////////////////////////////////////////// // create the webcamTexture var webcamTexture = new THREEx.WebcamTexture(); onRenderFcts.push( function( delta, now ) { webcamTexture.update( delta, now ); } ); // use the texture in a THREE.Mesh var geometry = new THREE.CubeGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { map : webcamTexture.texture } ); var mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); onRenderFcts.push( function( delta, now ) { mesh.rotation.x += 1 * delta * 0.1; mesh.rotation.y += 1 * delta * 0.1; } ); ////////////////////////////////////////////////////////////////////////////////// // Camera Controls // ////////////////////////////////////////////////////////////////////////////////// var mouse = { x : 0, y : 0 }; document.addEventListener( 'mousemove', function( event ) { mouse.x = ( event.clientX / window.innerWidth ) - 0.5; mouse.y = ( event.clientY / window.innerHeight ) - 0.5; }, false ); onRenderFcts.push( function( delta, now ) { //camera.position.x += (mouse.x*5 - camera.position.x) * (delta*3); //camera.position.y += (mouse.y*5 - camera.position.y) * (delta*3); camera.lookAt( scene.position ); }); ////////////////////////////////////////////////////////////////////////////////// // render the whole thing on the page ////////////////////////////////////////////////////////////////////////////////// // handle window resize window.addEventListener( 'resize', function() { renderer.setSize( window.innerWidth, window.innerHeight ); camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); }, false); // render the scene onRenderFcts.push( function() { renderer.render( scene, camera ); } ); // run the rendering loop var lastTimeMsec= null; requestAnimationFrame( function animate( nowMsec ) { // keep looping requestAnimationFrame( animate ); // measure time lastTimeMsec = lastTimeMsec || nowMsec - 1000 / 60; var deltaMsec = Math.min( 200, nowMsec - lastTimeMsec ); lastTimeMsec = nowMsec; // call each update function onRenderFcts.forEach( function( onRenderFct ) { onRenderFct( deltaMsec / 1000, nowMsec / 1000 ); } ); } );=================================
=================================
=================================
반응형
'WEB > WebGL' 카테고리의 다른 글
| [WebGL] Three.js - 튜토리얼 예제 모음 관련 (0) | 2017.11.02 |
|---|---|
| [WebGL] Three.js - 2DSprite 관련 (0) | 2017.11.02 |
| [WebGL] Three.js - COLLADA(dae) Loader (0) | 2017.11.01 |
| [WebGL] Three.js - Path Tracing (0) | 2017.11.01 |
| [WebGL] Three.js - Blur Shader (0) | 2017.11.01 |