Skip to content

Commit 359407b

Browse files
egraetheregraether
committed
added new TrackballCamera-example and changed keys
1 parent 20abaad commit 359407b

File tree

3 files changed

+215
-52
lines changed

3 files changed

+215
-52
lines changed

‎examples/misc_camera_trackball.html

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
<!DOCTYPE HTML>
2+
<html lang="en">
3+
<head>
4+
<title>three.js webgl - trackball camera</title>
5+
<meta charset="utf-8">
6+
<style type="text/css">
7+
body {
8+
color: #000;
9+
font-family:Monospace;
10+
font-size:13px;
11+
text-align:center;
12+
font-weight: bold;
13+
14+
background-color: #fff;
15+
margin: 0px;
16+
overflow: hidden;
17+
}
18+
19+
#info {
20+
color:#000;
21+
position: absolute;
22+
top: 0px; width: 100%;
23+
padding: 5px;
24+
25+
}
26+
27+
a { color: red; }
28+
29+
</style>
30+
</head>
31+
32+
<body>
33+
<div id="container"></div>
34+
<div id="info">
35+
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - trackball camera example</br>
36+
MOVE mouse & press LEFT/A: rotate, MIDDLE/S: zoom, RIGHT/D: pan
37+
</div>
38+
39+
<script type="text/javascript" src="../build/Three.js"></script>
40+
<script type="text/javascript" src="../src/extras/cameras/TrackballCamera.js"></script>
41+
<script type="text/javascript" src="js/Stats.js"></script>
42+
43+
<script type="text/javascript">
44+
45+
var statsEnabled = true;
46+
47+
var container, stats;
48+
49+
var camera, scene, renderer;
50+
51+
var cross;
52+
53+
init();
54+
55+
function init() {
56+
57+
// scene and camera
58+
59+
scene = new THREE.Scene();
60+
scene.fog = new THREE.FogExp2( 0xffffff, 0.002 );
61+
62+
camera = new THREE.TrackballCamera({
63+
64+
fov: 60,
65+
aspect: window.innerWidth / window.innerHeight,
66+
near: 1,
67+
far: 1e3,
68+
69+
rotateSpeed: 1.0,
70+
zoomSpeed: 1.2,
71+
panSpeed: 0.4,
72+
73+
noZoom: false,
74+
noPan: false,
75+
76+
staticMoving: false,
77+
dynamicDampingFactor: 0.3,
78+
79+
keys: [ 65, 83, 68 ]
80+
81+
});
82+
83+
camera.position.z = 500;
84+
85+
// world
86+
87+
var cube = new THREE.Cube( 20, 60, 20 );
88+
89+
cube.vertices[ 0 ].position.multiplyScalar( 0.01 );
90+
cube.vertices[ 1 ].position.multiplyScalar( 0.01 );
91+
cube.vertices[ 4 ].position.multiplyScalar( 0.01 );
92+
cube.vertices[ 5 ].position.multiplyScalar( 0.01 );
93+
94+
var material = new THREE.MeshLambertMaterial( { color:0xffffff } );
95+
96+
for( var i = 0; i < 500; i++ ) {
97+
98+
var mesh = new THREE.Mesh( cube, material );
99+
mesh.position.set(( Math.random() - 0.5 ) * 1000,
100+
( Math.random() - 0.5 ) * 1000,
101+
( Math.random() - 0.5 ) * 1000 );
102+
103+
mesh.updateMatrix();
104+
mesh.matrixAutoUpdate = false;
105+
scene.addChild( mesh );
106+
107+
}
108+
109+
110+
// create cross
111+
112+
/*
113+
cross = new THREE.Object3D();
114+
cross.scale.set( 0.5, 0.5, 0.5 );
115+
cross.matrixAutoUpdate = false;
116+
117+
var material = new THREE.MeshPhongMaterial( { color:0xff0000 } );
118+
var mesh = new THREE.Mesh( new THREE.Cube( 40, 5, 5 ), material );
119+
mesh.position.x = 20;
120+
cross.addChild( mesh );
121+
122+
var material = new THREE.MeshPhongMaterial( { color:0x00ff00 } );
123+
var mesh = new THREE.Mesh( new THREE.Cube( 5, 40, 5 ), material );
124+
mesh.position.y = 20;
125+
cross.addChild( mesh );
126+
127+
var material = new THREE.MeshPhongMaterial( { color:0x0000ff } );
128+
var mesh = new THREE.Mesh( new THREE.Cube( 5, 5, 40 ), material );
129+
mesh.position.z = 20;
130+
131+
cross.addChild( mesh );
132+
camera.addChild( cross );
133+
*/
134+
135+
136+
// lights
137+
138+
light = new THREE.DirectionalLight( 0xffffff );
139+
light.position.set( 1, 1, 1 );
140+
scene.addChild( light );
141+
142+
light = new THREE.DirectionalLight( 0x002288 );
143+
light.position.set( -1, -1, -1 );
144+
scene.addChild( light );
145+
146+
light = new THREE.AmbientLight( 0x222222 );
147+
scene.addChild( light );
148+
149+
150+
// renderer
151+
152+
renderer = new THREE.WebGLRenderer( { antialias: false } );
153+
renderer.setClearColorHex( 0xffffff, 1 );
154+
renderer.setSize( window.innerWidth, window.innerHeight );
155+
156+
container = document.getElementById( 'container' );
157+
container.appendChild( renderer.domElement );
158+
159+
if ( statsEnabled ) {
160+
161+
stats = new Stats();
162+
stats.domElement.style.position = 'absolute';
163+
stats.domElement.style.top = '0px';
164+
stats.domElement.style.zIndex = 100;
165+
container.appendChild( stats.domElement );
166+
167+
}
168+
169+
setInterval( loop, 1000 / 60 );
170+
171+
}
172+
173+
174+
function loop() {
175+
176+
/*
177+
cross.matrix.copy( camera.matrix );
178+
cross.matrix.n14 = 0;
179+
cross.matrix.n24 = 0;
180+
cross.matrix.n34 = -200;
181+
cross.matrixWorldNeedsUpdate = true;
182+
*/
183+
184+
renderer.render( scene, camera );
185+
186+
if ( statsEnabled ) stats.update();
187+
188+
}
189+
190+
191+
</script>
192+
193+
</body>
194+
</html>

‎examples/webgl_trackballcamera_earth.html

Lines changed: 20 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<style type="text/css">
66

77
body {
8-
background: #FFF;
8+
background: #000;
99
color: #EEE;
1010
padding: 0;
1111
margin: 0;
@@ -42,17 +42,11 @@
4242

4343
<div id="info">
4444
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - earth [trackball camera]<br/><br/>
45-
<b>MOVE</b> mouse & press <b>LEFT/SHIFT:</b> rotate, <b>MIDDLE/ALT:</b> zoom, <b>RIGHT/CTRL:</b> pan</div>
45+
<b>MOVE</b> mouse & press <b>LEFT/A:</b> rotate, <b>MIDDLE/S:</b> zoom, <b>RIGHT/D:</b> pan
46+
</div>
4647

4748
<script type="text/javascript">
4849

49-
if ( !Detector.webgl ) {
50-
51-
Detector.addGetWebGLMessage();
52-
return;
53-
54-
}
55-
5650
var radius = 6371,
5751
tilt = 0.41,
5852
rotationSpeed = 0.1,
@@ -66,13 +60,20 @@
6660
container, stats,
6761

6862
camera, scene, renderer,
69-
geometry, meshPlanet, meshClouds, meshMoon, meshMoon2, meshMoon3,
63+
geometry, meshPlanet, meshClouds, meshMoon,
7064
dirLight, ambientLight,
7165

7266
time = new Date().getTime();
7367

7468
window.onload = function() {
7569

70+
if ( !Detector.webgl ) {
71+
72+
Detector.addGetWebGLMessage();
73+
return;
74+
75+
}
76+
7677
init();
7778
animate();
7879

@@ -101,20 +102,20 @@
101102
near: 50,
102103
far: 1e7,
103104

104-
rotateSpeed: 0.6,
105+
rotateSpeed: 1.0,
105106
zoomSpeed: 1.2,
106107
panSpeed: 0.2,
107108

108109
noZoom: false,
109110
noPan: false,
110111

111112
staticMoving: false,
112-
dynamicDampingFactor: 0.2,
113+
dynamicDampingFactor: 0.3,
113114

114115
minDistance: radius * 1.1,
115116
maxDistance: radius * 100,
116117

117-
keys: [ 16, 18, 17 ], // [ rotateKey, zoomKey, panKey ],
118+
keys: [ 65, 83, 68 ], // [ rotateKey, zoomKey, panKey ],
118119

119120
domElement: renderer.domElement,
120121

@@ -199,26 +200,6 @@
199200
scene.addObject( meshMoon );
200201

201202

202-
// moon2
203-
204-
var materialMoon2 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: moonTexture } );
205-
206-
meshMoon2 = new THREE.Mesh( geometry, materialMoon );
207-
meshMoon2.position.set( -radius * 7, 0, radius * 3 );
208-
meshMoon2.scale.set( moonScale, moonScale, moonScale );
209-
scene.addObject( meshMoon2 );
210-
211-
212-
// moon3
213-
214-
var materialMoon3 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: moonTexture } );
215-
216-
meshMoon3 = new THREE.Mesh( geometry, materialMoon );
217-
meshMoon3.position.set( radius, 0, -radius * 10 );
218-
meshMoon3.scale.set( moonScale, moonScale, moonScale );
219-
scene.addObject( meshMoon3 );
220-
221-
222203
// stars
223204

224205
var i,
@@ -309,30 +290,18 @@
309290

310291
var angle = dt * rotationSpeed;
311292

312-
meshMoon.position = rotateY( meshMoon.position, angle * 2 );
313-
meshMoon.rotation.y += angle;
314-
315-
meshMoon2.position = rotateY( meshMoon2.position, -angle * 1.5 );
316-
meshMoon2.rotation.y += angle;
317-
318-
meshMoon3.position = rotateY( meshMoon3.position, angle );
319-
meshMoon3.rotation.y += angle;
293+
meshMoon.position = new THREE.Vector3(
294+
Math.cos( angle ) * meshMoon.position.x - Math.sin( angle ) * meshMoon.position.z,
295+
0,
296+
Math.sin( angle ) * meshMoon.position.x + Math.cos( angle ) * meshMoon.position.z
297+
);
298+
meshMoon.rotation.y -= angle;
320299

321300
renderer.clear();
322301
renderer.render( scene, camera );
323302

324303
};
325304

326-
function rotateY( vector, angle ) {
327-
328-
return new THREE.Vector3(
329-
Math.cos( angle ) * vector.x - Math.sin( angle ) * vector.z,
330-
0,
331-
Math.sin( angle ) * vector.x + Math.cos( angle ) * vector.z
332-
);
333-
334-
};
335-
336305
</script>
337306
</body>
338307
</html>

‎src/extras/cameras/TrackballCamera.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ THREE.TrackballCamera = function ( parameters ) {
5656
this.minDistance = parameters.minDistance || 0;
5757
this.maxDistance = parameters.maxDistance || Infinity;
5858

59-
this.keys = parameters.keys || [ 16 /*SHIFT*/, 18 /*ALT*/, 17 /*CTRL*/ ];
59+
this.keys = parameters.keys || [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];
6060

6161
this.useTarget = true;
6262

0 commit comments

Comments
 (0)