12-22 18:59
Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Scientific Computing & Data Science

[Programming / WebGL] Web Cam Texture 본문

Programming/WebGL(ThreeJS)

[Programming / WebGL] Web Cam Texture

cinema4dr12 2016. 8. 28. 23:51

WebGL 프레임웍인 three.js의 Extension인 threejs-extension을 이용하여 Web Cam으로부터 받은 화면을 텍스쳐로 적용하는 예제입니다.

예제 파일 다운로드 : webcam-texture.zip

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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>
cs

CSS [style.css]

1
2
3
4
5
6
7
#render {
  margin: 0px;
  background-color: #836b2c;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
cs

JavaScript [main.js]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
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 );
  } );
} );
cs


'Programming > WebGL(ThreeJS)' 카테고리의 다른 글

[Programming / WebGL(three.js)] CINEMA 4D로부터 Collada Export하여 WebGL에서 불러오기  (2) 2016.06.06
[WebGL/ThreeJS] COLLADA(dae) Loader  (0) 2015.10.11
[WebGL] Path Tracing  (0) 2015.08.07
[WebGL] Blur Shader  (0) 2015.08.07
[WebGL] Bloom Shader  (0) 2015.08.07
공유하기 링크
'Programming/WebGL(ThreeJS)' Related Articles more
Comments