Skip to content

Commit c0aaeba

Browse files
mrdoobmrdoob
committed
Added CanvasRenderer StereoEffect example.
CanvasRenderer still needs some sort of masking...
1 parent 0ed9bbd commit c0aaeba

3 files changed

Lines changed: 146 additions & 1 deletion

File tree

‎examples/canvas_effects_stereo.html‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>three.js canvas - effects - stereo</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7+
<style>
8+
body {
9+
background:#fff;
10+
padding:0;
11+
margin:0;
12+
font-weight: bold;
13+
overflow:hidden;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
19+
<script src="../build/three.min.js"></script>
20+
<script src="js/effects/StereoEffect.js"></script>
21+
22+
<script src="js/libs/stats.min.js"></script>
23+
24+
<script>
25+
26+
var container, stats;
27+
28+
var camera, scene, renderer;
29+
30+
var geometry, group;
31+
32+
var effect;
33+
34+
var mouseX = 0, mouseY = 0;
35+
36+
var windowHalfX = window.innerWidth / 2;
37+
var windowHalfY = window.innerHeight / 2;
38+
39+
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
40+
41+
init();
42+
animate();
43+
44+
function init() {
45+
46+
container = document.createElement( 'div' );
47+
document.body.appendChild( container );
48+
49+
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
50+
camera.position.z = 500;
51+
52+
scene = new THREE.Scene();
53+
54+
var geometry = new THREE.BoxGeometry( 100, 100, 100 );
55+
var material = new THREE.MeshNormalMaterial( { overdraw: 0.5 } );
56+
57+
group = new THREE.Object3D();
58+
59+
for ( var i = 0; i < 200; i ++ ) {
60+
61+
var mesh = new THREE.Mesh( geometry, material );
62+
mesh.position.x = Math.random() * 2000 - 1000;
63+
mesh.position.y = Math.random() * 2000 - 1000;
64+
mesh.position.z = Math.random() * 2000 - 1000;
65+
mesh.rotation.x = Math.random() * 2 * Math.PI;
66+
mesh.rotation.y = Math.random() * 2 * Math.PI;
67+
mesh.matrixAutoUpdate = false;
68+
mesh.updateMatrix();
69+
group.add( mesh );
70+
71+
}
72+
73+
scene.add( group );
74+
75+
renderer = new THREE.CanvasRenderer();
76+
renderer.setClearColor( 0xffffff );
77+
renderer.setSize( window.innerWidth, window.innerHeight );
78+
container.appendChild( renderer.domElement );
79+
80+
effect = new THREE.StereoEffect( renderer );
81+
effect.setSize( window.innerWidth, window.innerHeight );
82+
83+
stats = new Stats();
84+
stats.domElement.style.position = 'absolute';
85+
stats.domElement.style.top = '0px';
86+
stats.domElement.style.zIndex = 100;
87+
container.appendChild( stats.domElement );
88+
89+
//
90+
91+
window.addEventListener( 'resize', onWindowResize, false );
92+
93+
}
94+
95+
function onWindowResize() {
96+
97+
windowHalfX = window.innerWidth / 2;
98+
windowHalfY = window.innerHeight / 2;
99+
100+
camera.aspect = window.innerWidth / window.innerHeight;
101+
camera.updateProjectionMatrix();
102+
103+
renderer.setSize( window.innerWidth, window.innerHeight );
104+
effect.setSize( window.innerWidth, window.innerHeight );
105+
106+
}
107+
108+
function onDocumentMouseMove(event) {
109+
110+
mouseX = ( event.clientX - windowHalfX ) * 10;
111+
mouseY = ( event.clientY - windowHalfY ) * 10;
112+
113+
}
114+
115+
//
116+
117+
function animate() {
118+
119+
requestAnimationFrame( animate );
120+
121+
render();
122+
stats.update();
123+
124+
}
125+
126+
function render() {
127+
128+
camera.position.x += ( mouseX - camera.position.x ) * .05;
129+
camera.position.y += ( - mouseY - camera.position.y ) * .05;
130+
camera.lookAt( scene.position );
131+
132+
var currentSeconds = Date.now();
133+
group.rotation.x = Math.sin( currentSeconds * 0.0007 ) * 0.5;
134+
group.rotation.y = Math.sin( currentSeconds * 0.0003 ) * 0.5;
135+
group.rotation.z = Math.sin( currentSeconds * 0.0002 ) * 0.5;
136+
137+
effect.render( scene, camera );
138+
139+
}
140+
141+
</script>
142+
143+
</body>
144+
</html>

‎examples/canvas_geometry_hierarchy.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<title>three.js canvas - geometry hierarchy 2</title>
4+
<title>three.js canvas - geometry - hierarchy</title>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
77
<style>

‎examples/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -304,6 +304,7 @@ <h1><a href="http://threejs.org">three.js</a> / examples</h1>
304304
"canvas_ascii_effect",
305305
"canvas_camera_orthographic",
306306
"canvas_camera_orthographic2",
307+
"canvas_effects_stereo",
307308
"canvas_geometry_birds",
308309
"canvas_geometry_cube",
309310
"canvas_geometry_earth",

0 commit comments

Comments
 (0)