Skip to content

Commit ce4cae5

Browse files
alteredqalteredq
committed
Another batch of examples resizing handling.
1 parent 42d6798 commit ce4cae5

38 files changed

+639
-70
lines changed

‎examples/canvas_ascii_effect.html

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
font-family: Monospace;
1111
background-color: #f0f0f0;
1212
margin: 0px;
13-
overflow: hidden;
13+
overflow: hidden;
1414
}
1515
</style>
1616
</head>
@@ -19,6 +19,7 @@
1919
<script src="../build/Three.js"></script>
2020
<script src="js/effects/AsciiEffect.js"></script>
2121
<script src="js/Stats.js"></script>
22+
2223
<script>
2324

2425
var container, stats;
@@ -34,6 +35,9 @@
3435

3536
function init() {
3637

38+
var width = window.innerWidth || 2;
39+
var height = window.innerHeight || 2;
40+
3741
container = document.createElement( 'div' );
3842
document.body.appendChild( container );
3943

@@ -47,7 +51,7 @@
4751

4852
scene = new THREE.Scene();
4953

50-
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
54+
camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
5155
camera.position.y = 150;
5256
camera.position.z = 500;
5357
scene.add( camera );
@@ -72,17 +76,32 @@
7276
scene.add( plane );
7377

7478
renderer = new THREE.CanvasRenderer();
79+
renderer.setSize( width, height );
7580
// container.appendChild( renderer.domElement );
7681

7782
effect = new THREE.AsciiEffect( renderer );
78-
effect.setSize( window.innerWidth, window.innerHeight );
83+
effect.setSize( width, height );
7984
container.appendChild( effect.domElement );
8085

8186
stats = new Stats();
8287
stats.domElement.style.position = 'absolute';
8388
stats.domElement.style.top = '0px';
8489
container.appendChild( stats.domElement );
8590

91+
//
92+
93+
window.addEventListener( 'resize', onWindowResize, false );
94+
95+
}
96+
97+
function onWindowResize() {
98+
99+
camera.aspect = window.innerWidth / window.innerHeight;
100+
camera.updateProjectionMatrix();
101+
102+
renderer.setSize( window.innerWidth, window.innerHeight );
103+
effect.setSize( window.innerWidth, window.innerHeight );
104+
86105
}
87106

88107
//

‎examples/canvas_camera_orthographic.html

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484
cube.position.y = ( cube.scale.y * 50 ) / 2;
8585
cube.position.z = Math.floor( ( Math.random() * 1000 - 500 ) / 50 ) * 50 + 25;
8686

87-
scene.add(cube);
87+
scene.add( cube );
8888

8989
}
9090

@@ -117,6 +117,23 @@
117117
stats.domElement.style.top = '0px';
118118
container.appendChild( stats.domElement );
119119

120+
//
121+
122+
window.addEventListener( 'resize', onWindowResize, false );
123+
124+
}
125+
126+
function onWindowResize() {
127+
128+
camera.left = window.innerWidth / - 2;
129+
camera.right = window.innerWidth / 2;
130+
camera.top = window.innerHeight / 2;
131+
camera.bottom = window.innerHeight / - 2;
132+
133+
camera.updateProjectionMatrix();
134+
135+
renderer.setSize( window.innerWidth, window.innerHeight );
136+
120137
}
121138

122139
//

‎examples/canvas_geometry_birds.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -383,6 +383,19 @@
383383

384384
document.getElementById( 'container' ).appendChild(stats.domElement);
385385

386+
//
387+
388+
window.addEventListener( 'resize', onWindowResize, false );
389+
390+
}
391+
392+
function onWindowResize() {
393+
394+
camera.aspect = window.innerWidth / window.innerHeight;
395+
camera.updateProjectionMatrix();
396+
397+
renderer.setSize( window.innerWidth, window.innerHeight );
398+
386399
}
387400

388401
function onDocumentMouseMove( event ) {

‎examples/canvas_geometry_cube.html

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,23 @@
9191
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
9292
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
9393
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
94+
95+
//
96+
97+
window.addEventListener( 'resize', onWindowResize, false );
98+
99+
}
100+
101+
function onWindowResize() {
102+
103+
windowHalfX = window.innerWidth / 2,
104+
windowHalfY = window.innerHeight / 2,
105+
106+
camera.aspect = window.innerWidth / window.innerHeight;
107+
camera.updateProjectionMatrix();
108+
109+
renderer.setSize( window.innerWidth, window.innerHeight );
110+
94111
}
95112

96113
//
@@ -105,51 +122,57 @@
105122

106123
mouseXOnMouseDown = event.clientX - windowHalfX;
107124
targetRotationOnMouseDown = targetRotation;
125+
108126
}
109127

110128
function onDocumentMouseMove( event ) {
111129

112130
mouseX = event.clientX - windowHalfX;
113131

114132
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
133+
115134
}
116135

117136
function onDocumentMouseUp( event ) {
118137

119138
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
120139
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
121140
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
141+
122142
}
123143

124144
function onDocumentMouseOut( event ) {
125145

126146
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
127147
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
128148
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
149+
129150
}
130151

131152
function onDocumentTouchStart( event ) {
132153

133-
if ( event.touches.length == 1 ) {
154+
if ( event.touches.length === 1 ) {
134155

135156
event.preventDefault();
136157

137158
mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
138159
targetRotationOnMouseDown = targetRotation;
139160

140161
}
162+
141163
}
142164

143165
function onDocumentTouchMove( event ) {
144166

145-
if ( event.touches.length == 1 ) {
167+
if ( event.touches.length === 1 ) {
146168

147169
event.preventDefault();
148170

149171
mouseX = event.touches[ 0 ].pageX - windowHalfX;
150172
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
151173

152174
}
175+
153176
}
154177

155178
//

‎examples/canvas_geometry_earth.html

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
scene.add( group );
6565

6666
// earth
67-
67+
6868
var earthTexture = new THREE.Texture();
6969
var loader = new THREE.ImageLoader();
7070

@@ -84,12 +84,12 @@
8484
group.add( mesh );
8585

8686
// shadow
87-
87+
8888
var shadowTexture = new THREE.Texture();
8989
var loader = new THREE.ImageLoader();
9090

9191
loader.addEventListener( 'load', function ( event ) {
92-
92+
9393
shadowTexture.image = event.content;
9494
shadowTexture.needsUpdate = true;
9595

@@ -116,6 +116,22 @@
116116

117117
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
118118

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

121137
function onDocumentMouseMove( event ) {

‎examples/canvas_geometry_hierarchy.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,22 @@
8282
stats.domElement.style.zIndex = 100;
8383
container.appendChild( stats.domElement );
8484

85+
//
86+
87+
window.addEventListener( 'resize', onWindowResize, false );
88+
89+
}
90+
91+
function onWindowResize() {
92+
93+
windowHalfX = window.innerWidth / 2,
94+
windowHalfY = window.innerHeight / 2,
95+
96+
camera.aspect = window.innerWidth / window.innerHeight;
97+
camera.updateProjectionMatrix();
98+
99+
renderer.setSize( window.innerWidth, window.innerHeight );
100+
85101
}
86102

87103
function onDocumentMouseMove(event) {

‎examples/canvas_geometry_panorama.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,21 @@
9696
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
9797
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
9898

99+
//
100+
101+
window.addEventListener( 'resize', onWindowResize, false );
102+
103+
}
104+
105+
function onWindowResize() {
106+
107+
camera.aspect = window.innerWidth / window.innerHeight;
108+
camera.updateProjectionMatrix();
109+
110+
renderer.setSize( window.innerWidth, window.innerHeight );
111+
112+
render();
113+
99114
}
100115

101116
function loadTexture( path ) {
@@ -141,6 +156,7 @@
141156
render();
142157

143158
}
159+
144160
}
145161

146162
function onDocumentMouseUp( event ) {

‎examples/canvas_geometry_panorama_fisheye.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,21 @@
106106
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
107107
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
108108

109+
//
110+
111+
window.addEventListener( 'resize', onWindowResize, false );
112+
113+
}
114+
115+
function onWindowResize() {
116+
117+
camera.aspect = window.innerWidth / window.innerHeight;
118+
camera.updateProjectionMatrix();
119+
120+
renderer.setSize( window.innerWidth, window.innerHeight );
121+
122+
render();
123+
109124
}
110125

111126
function loadTexture( path ) {

‎examples/canvas_geometry_terrain.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,22 @@
9898

9999
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
100100

101+
//
102+
103+
window.addEventListener( 'resize', onWindowResize, false );
104+
105+
}
106+
107+
function onWindowResize() {
108+
109+
windowHalfX = window.innerWidth / 2,
110+
windowHalfY = window.innerHeight / 2,
111+
112+
camera.aspect = window.innerWidth / window.innerHeight;
113+
camera.updateProjectionMatrix();
114+
115+
renderer.setSize( window.innerWidth, window.innerHeight );
116+
101117
}
102118

103119
function generateHeight( width, height ) {

‎examples/canvas_geometry_text.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,22 @@
120120
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
121121
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
122122

123+
//
124+
125+
window.addEventListener( 'resize', onWindowResize, false );
126+
127+
}
128+
129+
function onWindowResize() {
130+
131+
windowHalfX = window.innerWidth / 2,
132+
windowHalfY = window.innerHeight / 2,
133+
134+
camera.aspect = window.innerWidth / window.innerHeight;
135+
camera.updateProjectionMatrix();
136+
137+
renderer.setSize( window.innerWidth, window.innerHeight );
138+
123139
}
124140

125141
//

‎examples/canvas_interactive_cubes.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,19 @@
102102

103103
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
104104

105+
//
106+
107+
window.addEventListener( 'resize', onWindowResize, false );
108+
109+
}
110+
111+
function onWindowResize() {
112+
113+
camera.aspect = window.innerWidth / window.innerHeight;
114+
camera.updateProjectionMatrix();
115+
116+
renderer.setSize( window.innerWidth, window.innerHeight );
117+
105118
}
106119

107120
function onDocumentMouseDown( event ) {

0 commit comments

Comments
 (0)