Skip to content

Commit 955a531

Browse files
alteredqalteredq
committed
Fixed TrackballControls, RollControls and PathControls not handling window resize. Commented out key event swallowing in FlyControl. Started to fix examples not dealing properly with 0 sized window on init.
See mrdoob#2062
1 parent 747ab5a commit 955a531

11 files changed

+160
-48
lines changed

‎build/Three.js

Lines changed: 18 additions & 17 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/custom/ThreeExtras.js

Lines changed: 18 additions & 17 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/misc_camera_orbit.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,21 @@
117117
stats.domElement.style.zIndex = 100;
118118
container.appendChild( stats.domElement );
119119

120+
//
121+
122+
window.addEventListener( 'resize', onWindowResize, false );
123+
124+
}
125+
126+
function onWindowResize() {
127+
128+
camera.aspect = window.innerWidth / window.innerHeight;
129+
camera.updateProjectionMatrix();
130+
131+
renderer.setSize( window.innerWidth, window.innerHeight );
132+
133+
render();
134+
120135
}
121136

122137
function animate() {

‎examples/misc_camera_path.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,12 +131,27 @@
131131
stats.domElement.style.zIndex = 100;
132132
container.appendChild( stats.domElement );
133133

134+
//
135+
136+
window.addEventListener( 'resize', onWindowResize, false );
137+
134138
// start animation
135139

136140
controls.animation.play( true, 0 );
137141

138142
}
139143

144+
function onWindowResize() {
145+
146+
camera.aspect = window.innerWidth / window.innerHeight;
147+
camera.updateProjectionMatrix();
148+
149+
renderer.setSize( window.innerWidth, window.innerHeight );
150+
151+
controls.handleResize();
152+
153+
}
154+
140155
function animate() {
141156

142157
requestAnimationFrame( animate );

‎examples/misc_camera_roll.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,21 @@
121121
stats.domElement.style.zIndex = 100;
122122
container.appendChild( stats.domElement );
123123

124+
//
125+
126+
window.addEventListener( 'resize', onWindowResize, false );
127+
128+
}
129+
130+
function onWindowResize() {
131+
132+
camera.aspect = window.innerWidth / window.innerHeight;
133+
camera.updateProjectionMatrix();
134+
135+
renderer.setSize( window.innerWidth, window.innerHeight );
136+
137+
controls.handleResize();
138+
124139
}
125140

126141
function animate() {

‎examples/misc_camera_trackball.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,23 @@
131131
stats.domElement.style.zIndex = 100;
132132
container.appendChild( stats.domElement );
133133

134+
//
135+
136+
window.addEventListener( 'resize', onWindowResize, false );
137+
138+
}
139+
140+
function onWindowResize() {
141+
142+
camera.aspect = window.innerWidth / window.innerHeight;
143+
camera.updateProjectionMatrix();
144+
145+
renderer.setSize( window.innerWidth, window.innerHeight );
146+
147+
controls.handleResize();
148+
149+
render();
150+
134151
}
135152

136153
function animate() {

‎examples/webgl_geometry_cube.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,19 @@
4747
renderer.setSize( window.innerWidth, window.innerHeight );
4848
document.body.appendChild( renderer.domElement );
4949

50+
//
51+
52+
window.addEventListener( 'resize', onWindowResize, false );
53+
54+
}
55+
56+
function onWindowResize() {
57+
58+
camera.aspect = window.innerWidth / window.innerHeight;
59+
camera.updateProjectionMatrix();
60+
61+
renderer.setSize( window.innerWidth, window.innerHeight );
62+
5063
}
5164

5265
function animate() {

‎src/extras/controls/FlyControls.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ THREE.FlyControls = function ( object, domElement ) {
4949

5050
}
5151

52-
event.preventDefault();
52+
//event.preventDefault();
5353

5454
switch ( event.keyCode ) {
5555

‎src/extras/controls/PathControls.js

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -41,24 +41,33 @@ THREE.PathControls = function ( object, domElement ) {
4141
this.phi = 0;
4242
this.theta = 0;
4343

44-
if ( this.domElement === document ) {
45-
46-
this.viewHalfX = window.innerWidth / 2;
47-
this.viewHalfY = window.innerHeight / 2;
44+
var PI2 = Math.PI * 2,
45+
PI180 = Math.PI / 180;
4846

49-
} else {
47+
if ( this.domElement !== document ) {
5048

51-
this.viewHalfX = this.domElement.offsetWidth / 2;
52-
this.viewHalfY = this.domElement.offsetHeight / 2;
5349
this.domElement.setAttribute( 'tabindex', -1 );
5450

5551
}
5652

57-
var PI2 = Math.PI * 2,
58-
PI180 = Math.PI / 180;
59-
6053
// methods
6154

55+
this.handleResize = function () {
56+
57+
if ( this.domElement === document ) {
58+
59+
this.viewHalfX = window.innerWidth / 2;
60+
this.viewHalfY = window.innerHeight / 2;
61+
62+
} else {
63+
64+
this.viewHalfX = this.domElement.offsetWidth / 2;
65+
this.viewHalfY = this.domElement.offsetHeight / 2;
66+
67+
}
68+
69+
};
70+
6271
this.update = function ( delta ) {
6372

6473
var srcRange, dstRange;
@@ -306,6 +315,8 @@ THREE.PathControls = function ( object, domElement ) {
306315

307316
};
308317

318+
this.handleResize();
319+
309320
};
310321

311322
THREE.PathControlsIdCounter = 0;

‎src/extras/controls/RollControls.js

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,17 @@ THREE.RollControls = function ( object, domElement ) {
3737

3838
var mouseX = 0, mouseY = 0;
3939

40-
var windowHalfX = window.innerWidth / 2;
41-
var windowHalfY = window.innerHeight / 2;
40+
var windowHalfX = 0;
41+
var windowHalfY = 0;
42+
43+
//
44+
45+
this.handleResize = function () {
46+
47+
windowHalfX = window.innerWidth / 2;
48+
windowHalfY = window.innerHeight / 2;
49+
50+
};
4251

4352
// custom update
4453

@@ -259,4 +268,6 @@ THREE.RollControls = function ( object, domElement ) {
259268
this.domElement.addEventListener( 'keydown', onKeyDown, false );
260269
this.domElement.addEventListener( 'keyup', onKeyUp, false );
261270

271+
this.handleResize();
272+
262273
};

‎src/extras/controls/TrackballControls.js

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ THREE.TrackballControls = function ( object, domElement ) {
1616

1717
this.enabled = true;
1818

19-
this.screen = { width: window.innerWidth, height: window.innerHeight, offsetLeft: 0, offsetTop: 0 };
19+
this.screen = { width: 0, height: 0, offsetLeft: 0, offsetTop: 0 };
2020
this.radius = ( this.screen.width + this.screen.height ) / 4;
2121

2222
this.rotateSpeed = 1.0;
@@ -62,6 +62,17 @@ THREE.TrackballControls = function ( object, domElement ) {
6262

6363
// methods
6464

65+
this.handleResize = function () {
66+
67+
this.screen.width = window.innerWidth;
68+
this.screen.height = window.innerHeight;
69+
70+
this.screen.offsetLeft = 0;
71+
this.screen.offsetTop = 0;
72+
73+
this.radius = ( this.screen.width + this.screen.height ) / 4;
74+
};
75+
6576
this.handleEvent = function ( event ) {
6677

6778
if ( typeof this[ event.type ] == 'function' ) {
@@ -384,4 +395,6 @@ THREE.TrackballControls = function ( object, domElement ) {
384395
window.addEventListener( 'keydown', keydown, false );
385396
window.addEventListener( 'keyup', keyup, false );
386397

398+
this.handleResize();
399+
387400
};

0 commit comments

Comments
 (0)