Skip to content

Commit a4471ba

Browse files
alteredqalteredq
committed
Added orthographic camera to visible camera example.
1 parent 2b7c115 commit a4471ba

File tree

1 file changed

+78
-16
lines changed

1 file changed

+78
-16
lines changed

‎examples/webgl_camera.html

Lines changed: 78 additions & 16 deletions
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 webgl - camera</title>
4+
<title>three.js webgl - cameras</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>
@@ -28,12 +28,16 @@
2828
color: #0080ff;
2929
}
3030

31+
b { color: lightgreen }
32+
3133
</style>
3234
</head>
3335
<body>
3436

3537
<div id="container"></div>
36-
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - camera</div>
38+
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - cameras<br/>
39+
<b>O</b> orthographic <b>P</b> perspective
40+
</div>
3741

3842
<script src="../build/Three.js"></script>
3943
<script src="js/Stats.js"></script>
@@ -45,6 +49,7 @@
4549

4650
var container, stats;
4751
var camera, scene, renderer, mesh;
52+
var cameraRig, activeCamera, cameraPerspective, cameraOrtho;
4853

4954
var r = 0;
5055

@@ -62,11 +67,30 @@
6267
camera.position.z = 2500;
6368
scene.add( camera );
6469

65-
camera2 = new THREE.PerspectiveCamera( 50, 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT, 150, 1000 );
66-
scene.add( camera2 );
70+
cameraPerspective = new THREE.PerspectiveCamera( 50, 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT, 150, 1000 );
71+
72+
var visibleCameraPerspective = new THREE.VisibleCamera( cameraPerspective );
73+
cameraPerspective.add( visibleCameraPerspective );
74+
75+
cameraOrtho = new THREE.OrthographicCamera( 0.5 * SCREEN_WIDTH / - 2, 0.5 * SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, 150, 1000 );
76+
77+
var visibleCameraOrtho = new THREE.VisibleCamera( cameraOrtho );
78+
cameraOrtho.add( visibleCameraOrtho );
79+
80+
activeCamera = cameraPerspective;
81+
82+
83+
// counteract different front orientation of cameras vs rig
6784

68-
var visibleCamera = new THREE.VisibleCamera( camera2 );
69-
camera2.add( visibleCamera );
85+
cameraOrtho.rotation.y = Math.PI;
86+
cameraPerspective.rotation.y = Math.PI;
87+
88+
cameraRig = new THREE.Object3D();
89+
90+
cameraRig.add( cameraPerspective );
91+
cameraRig.add( cameraOrtho );
92+
93+
scene.add( cameraRig );
7094

7195
//
7296

@@ -78,8 +102,8 @@
78102
mesh.add( mesh2 );
79103

80104
var mesh3 = new THREE.Mesh( new THREE.SphereGeometry( 5, 16, 8 ), new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true } ) );
81-
mesh3.position.z = -150;
82-
camera2.add( mesh3 );
105+
mesh3.position.z = 150;
106+
cameraRig.add( mesh3 );
83107

84108
//
85109

@@ -125,9 +149,25 @@
125149
//
126150

127151
window.addEventListener( 'resize', onWindowResize, false );
152+
document.addEventListener( 'keydown', onKeyDown, false );
128153

129154
}
130155

156+
//
157+
158+
function onKeyDown ( event ) {
159+
160+
switch( event.keyCode ) {
161+
162+
case 79: /*O*/ activeCamera = cameraOrtho; break;
163+
case 80: /*P*/ activeCamera = cameraPerspective; break;
164+
165+
}
166+
167+
};
168+
169+
//
170+
131171
function onWindowResize( event ) {
132172

133173
SCREEN_WIDTH = window.innerWidth;
@@ -138,8 +178,14 @@
138178
camera.aspect = 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT;
139179
camera.updateProjectionMatrix();
140180

141-
camera2.aspect = 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT;
142-
camera2.updateProjectionMatrix();
181+
cameraPerspective.aspect = 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT;
182+
cameraPerspective.updateProjectionMatrix();
183+
184+
cameraOrtho.left = - 0.5 * SCREEN_WIDTH / 2;
185+
cameraOrtho.right = 0.5 * SCREEN_WIDTH / 2;
186+
cameraOrtho.top = SCREEN_HEIGHT / 2;
187+
cameraOrtho.bottom = - SCREEN_HEIGHT / 2;
188+
cameraOrtho.updateProjectionMatrix();
143189

144190
}
145191

@@ -164,17 +210,33 @@
164210
mesh.children[ 0 ].position.x = 70 * Math.cos( 2 * r );
165211
mesh.children[ 0 ].position.z = 70 * Math.sin( r );
166212

167-
camera2.fov = 35 + 30 * Math.sin( 0.5 * r );
168-
camera2.far = mesh.position.length();
169-
camera2.updateProjectionMatrix();
170-
camera2.children[ 0 ].update( camera2 );
213+
if ( activeCamera === cameraPerspective ) {
214+
215+
cameraPerspective.fov = 35 + 30 * Math.sin( 0.5 * r );
216+
cameraPerspective.far = mesh.position.length();
217+
cameraPerspective.updateProjectionMatrix();
218+
cameraPerspective.children[ 0 ].update( cameraPerspective );
219+
220+
cameraPerspective.children[ 0 ].lines.visible = true;
221+
cameraOrtho.children[ 0 ].lines.visible = false;
222+
223+
} else {
224+
225+
cameraOrtho.far = mesh.position.length();
226+
cameraOrtho.updateProjectionMatrix();
227+
cameraOrtho.children[ 0 ].update( cameraOrtho );
228+
229+
cameraPerspective.children[ 0 ].lines.visible = false;
230+
cameraOrtho.children[ 0 ].lines.visible = true;
231+
232+
}
171233

172-
camera2.lookAt( mesh.position );
234+
cameraRig.lookAt( mesh.position );
173235

174236
renderer.clear();
175237

176238
renderer.setViewport( 0, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT );
177-
renderer.render( scene, camera2 );
239+
renderer.render( scene, activeCamera );
178240

179241
renderer.setViewport( SCREEN_WIDTH/2, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT );
180242
renderer.render( scene, camera );

0 commit comments

Comments
 (0)