-
Notifications
You must be signed in to change notification settings - Fork 19
/
demo6.htm
122 lines (121 loc) · 4.17 KB
/
demo6.htm
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
<head>
<script language="JavaScript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="JavaScript" src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script language="JavaScript" src="http://mrdoob.github.com/three.js/build/three.min.js"></script>
<script language="JavaScript" src="http://mrdoob.github.com/three.js/examples/js/Detector.js"></script>
<script language="JavaScript" src="scriptcam.js"></script>
<script>
var SCREEN_WIDTH = 500;
var SCREEN_HEIGHT = 384;
var windowHalfX = SCREEN_WIDTH / 2;
var windowHalfY = SCREEN_HEIGHT / 2;
var FLOOR = -250;
var container;
var camera, scene;
var webglRenderer;
var mesh, zmesh, geometry;
var mouseX = 0, mouseY = 0;
var has_gl = 0;
$(document).ready(function() {
container = document.getElementById( 'obj' );
camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
camera.position.z = 500;
scene = new THREE.Scene();
var x = document.createElement( "canvas" );
var xc = x.getContext("2d");
x.width = x.height = 10;
xc.fillStyle = "#EEEEEE";
xc.fillRect(0, 0, 10, 10);
var xm = new THREE.MeshBasicMaterial( { map: new THREE.Texture( x, new THREE.UVMapping(), THREE.RepeatWrapping, THREE.RepeatWrapping ) } );
xm.map.needsUpdate = true;
xm.map.repeat.set( 10, 10 );
geometry = new THREE.PlaneGeometry( 100, 100, 15, 10 );
mesh = new THREE.Mesh( geometry, xm );
mesh.position.set( 0, FLOOR, 0 );
mesh.rotation.x = - Math.PI / 2;
mesh.scale.set( 10, 10, 10 );
scene.add( mesh );
var ambient = new THREE.AmbientLight( 0xffffff );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 255 ).normalize();
scene.add( directionalLight );
var directionalLight2 = new THREE.DirectionalLight( 0xffffff );
directionalLight2.position.set( 0, 0, 100 ).normalize();
scene.add( directionalLight2 );
try {
webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
webglRenderer.domElement.style.position = "relative";
container.appendChild( webglRenderer.domElement );
has_gl = 1;
}
catch (e) {
}
if (!has_gl) {
alert("No openGL");
}
else {
var loader = new THREE.JSONLoader();
var callbackFemale = function ( geometry, materials ) {
zmesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
zmesh.position.set( 0, FLOOR, 150 );
zmesh.scale.set( 3, 3, 3 );
scene.add( zmesh );
};
loader.load( "3D_female.js", callbackFemale );
animate();
}
$("#webcam").scriptcam({
onMotion:onMotion,
onError:onError,
onWebcamReady:onWebcamReady,
cornerRadius:0,
zoom:0.7,
posX:224,
posY:0,
flip:1
});
});
function onError(errorId,errorMsg) {
alert(errorMsg);
}
function changeCamera() {
$.scriptcam.changeCamera($('#cameraNames').val());
}
function getMotion() {
$.scriptcam.getMotionParameters();
}
function onWebcamReady(cameraNames,camera,microphoneNames,microphone,volume) {
$.each(cameraNames, function(index, text) {
$('#cameraNames').append( $('<option></option>').val(index).html(text) )
});
$('#cameraNames').val(camera);
setInterval(getMotion,500);
}
function onMotion(motion,brightness,color,motionx,motiony) {
console.log(motionx,motiony);
mouseX=parseInt(motionx*2);
mouseY=parseInt(motiony*2);
}
function animate() {
requestAnimationFrame( animate );
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );
webglRenderer.render( scene, camera );
}
</script>
</head>
<body>
<div id="obj"></div>
<div id="webcam"></div>
<div style="margin:5px;">
<img src="webcamlogo.png" style="vertical-align:text-top"/>
<select id="cameraNames" size="1" onChange="changeCamera()" style="width:245px;font-size:10px;height:25px;">
</select>
</div>
</body>
</html>