Skip to content

Commit 977ed48

Browse files
mrdoobmrdoob
authored
Merge pull request mrdoob#13808 from Mugen87/dev3
Examples: Clean up
2 parents 5d62862 + 11f91fe commit 977ed48

File tree

4 files changed

+96
-101
lines changed

4 files changed

+96
-101
lines changed

‎examples/webgl_points_billboards.html‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,7 @@
4545

4646
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
4747

48-
var container, stats;
49-
var camera, scene, renderer, particles, geometry, material, i, h, color, sprite, size;
48+
var camera, scene, renderer, stats, material;
5049
var mouseX = 0, mouseY = 0;
5150

5251
var windowHalfX = window.innerWidth / 2;
@@ -57,47 +56,46 @@
5756

5857
function init() {
5958

60-
container = document.createElement( 'div' );
61-
document.body.appendChild( container );
62-
6359
camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 2, 2000 );
6460
camera.position.z = 1000;
6561

6662
scene = new THREE.Scene();
6763
scene.fog = new THREE.FogExp2( 0x000000, 0.001 );
6864

69-
geometry = new THREE.Geometry();
65+
var geometry = new THREE.BufferGeometry();
66+
var vertices = [];
7067

71-
sprite = new THREE.TextureLoader().load( "textures/sprites/disc.png" );
68+
var sprite = new THREE.TextureLoader().load( 'textures/sprites/disc.png' );
7269

73-
for ( i = 0; i < 10000; i ++ ) {
70+
for ( var i = 0; i < 10000; i ++ ) {
7471

75-
var vertex = new THREE.Vector3();
76-
vertex.x = 2000 * Math.random() - 1000;
77-
vertex.y = 2000 * Math.random() - 1000;
78-
vertex.z = 2000 * Math.random() - 1000;
72+
var x = 2000 * Math.random() - 1000;
73+
var y = 2000 * Math.random() - 1000;
74+
var z = 2000 * Math.random() - 1000;
7975

80-
geometry.vertices.push( vertex );
76+
vertices.push( x, y, z );
8177

8278
}
8379

80+
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
81+
8482
material = new THREE.PointsMaterial( { size: 35, sizeAttenuation: false, map: sprite, alphaTest: 0.5, transparent: true } );
8583
material.color.setHSL( 1.0, 0.3, 0.7 );
8684

87-
particles = new THREE.Points( geometry, material );
85+
var particles = new THREE.Points( geometry, material );
8886
scene.add( particles );
8987

9088
//
9189

9290
renderer = new THREE.WebGLRenderer();
9391
renderer.setPixelRatio( window.devicePixelRatio );
9492
renderer.setSize( window.innerWidth, window.innerHeight );
95-
container.appendChild( renderer.domElement );
93+
document.body.appendChild( renderer.domElement );
9694

9795
//
9896

9997
stats = new Stats();
100-
container.appendChild( stats.dom );
98+
document.body.appendChild( stats.dom );
10199

102100
//
103101

@@ -175,7 +173,7 @@
175173

176174
camera.lookAt( scene.position );
177175

178-
h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
176+
var h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
179177
material.color.setHSL( h, 0.5, 0.5 );
180178

181179
renderer.render( scene, camera );

‎examples/webgl_points_billboards_colors.html‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,7 @@
4545

4646
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
4747

48-
var container, stats;
49-
var camera, scene, renderer, particles, geometry, material, i, h, color, colors = [], sprite, size;
48+
var camera, scene, renderer, stats, material;
5049
var mouseX = 0, mouseY = 0;
5150

5251
var windowHalfX = window.innerWidth / 2;
@@ -57,52 +56,54 @@
5756

5857
function init() {
5958

60-
container = document.createElement( 'div' );
61-
document.body.appendChild( container );
62-
6359
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 3000 );
6460
camera.position.z = 1400;
6561

6662
scene = new THREE.Scene();
6763
scene.fog = new THREE.FogExp2( 0x000000, 0.0009 );
6864

69-
geometry = new THREE.Geometry();
65+
var geometry = new THREE.BufferGeometry();
66+
var vertices = [];
67+
var colors = [];
68+
69+
var sprite = new THREE.TextureLoader().load( 'textures/sprites/ball.png' );
7070

71-
sprite = new THREE.TextureLoader().load( "textures/sprites/ball.png" );
71+
var color = new THREE.Color();
7272

73-
for ( i = 0; i < 5000; i ++ ) {
73+
for ( var i = 0; i < 5000; i ++ ) {
7474

75-
var vertex = new THREE.Vector3();
76-
vertex.x = 2000 * Math.random() - 1000;
77-
vertex.y = 2000 * Math.random() - 1000;
78-
vertex.z = 2000 * Math.random() - 1000;
75+
var x = 2000 * Math.random() - 1000;
76+
var y = 2000 * Math.random() - 1000;
77+
var z = 2000 * Math.random() - 1000;
7978

80-
geometry.vertices.push( vertex );
79+
color.setHSL( ( x + 1000 ) / 2000, 1, 0.5 );
8180

82-
colors[ i ] = new THREE.Color( 0xffffff );
83-
colors[ i ].setHSL( ( vertex.x + 1000 ) / 2000, 1, 0.5 );
81+
vertices.push( x, y, z );
82+
colors.push( color.r, color.g, color.b );
8483

8584
}
8685

87-
geometry.colors = colors;
86+
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
87+
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
88+
8889

8990
material = new THREE.PointsMaterial( { size: 85, map: sprite, vertexColors: THREE.VertexColors, alphaTest: 0.5, transparent: true } );
9091
material.color.setHSL( 1.0, 0.2, 0.7 );
9192

92-
particles = new THREE.Points( geometry, material );
93+
var particles = new THREE.Points( geometry, material );
9394
scene.add( particles );
9495

9596
//
9697

9798
renderer = new THREE.WebGLRenderer();
9899
renderer.setPixelRatio( window.devicePixelRatio );
99100
renderer.setSize( window.innerWidth, window.innerHeight );
100-
container.appendChild( renderer.domElement );
101+
document.body.appendChild( renderer.domElement );
101102

102103
//
103104

104105
stats = new Stats();
105-
container.appendChild( stats.dom );
106+
document.body.appendChild( stats.dom );
106107

107108
//
108109

@@ -180,7 +181,7 @@
180181

181182
camera.lookAt( scene.position );
182183

183-
h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
184+
var h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
184185
material.color.setHSL( h, 1.0, 0.6 );
185186

186187
renderer.render( scene, camera );

‎examples/webgl_points_random.html‎

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,7 @@
4545

4646
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
4747

48-
var container, stats;
49-
var camera, scene, renderer, particles, geometry, materials = [], parameters, i, h, color, size;
48+
var camera, scene, renderer, stats, materials = [], parameters;
5049
var mouseX = 0, mouseY = 0;
5150

5251
var windowHalfX = window.innerWidth / 2;
@@ -57,44 +56,43 @@
5756

5857
function init() {
5958

60-
container = document.createElement( 'div' );
61-
document.body.appendChild( container );
62-
6359
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
6460
camera.position.z = 1000;
6561

6662
scene = new THREE.Scene();
6763
scene.fog = new THREE.FogExp2( 0x000000, 0.0007 );
6864

69-
geometry = new THREE.Geometry();
65+
var geometry = new THREE.BufferGeometry();
66+
67+
var vertices = [];
7068

71-
for ( i = 0; i < 20000; i ++ ) {
69+
for ( var i = 0; i < 20000; i ++ ) {
7270

73-
var vertex = new THREE.Vector3();
74-
vertex.x = Math.random() * 2000 - 1000;
75-
vertex.y = Math.random() * 2000 - 1000;
76-
vertex.z = Math.random() * 2000 - 1000;
71+
var x = Math.random() * 2000 - 1000;
72+
var y = Math.random() * 2000 - 1000;
73+
var z = Math.random() * 2000 - 1000;
7774

78-
geometry.vertices.push( vertex );
75+
vertices.push( x, y, z );
7976

8077
}
8178

79+
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
80+
8281
parameters = [
83-
[ [1, 1, 0.5], 5 ],
84-
[ [0.95, 1, 0.5], 4 ],
85-
[ [0.90, 1, 0.5], 3 ],
86-
[ [0.85, 1, 0.5], 2 ],
87-
[ [0.80, 1, 0.5], 1 ]
82+
[ [ 1, 1, 0.5 ], 5 ],
83+
[ [ 0.95, 1, 0.5 ], 4 ],
84+
[ [ 0.90, 1, 0.5 ], 3 ],
85+
[ [ 0.85, 1, 0.5 ], 2 ],
86+
[ [ 0.80, 1, 0.5 ], 1 ]
8887
];
8988

90-
for ( i = 0; i < parameters.length; i ++ ) {
89+
for ( var i = 0; i < parameters.length; i ++ ) {
9190

92-
color = parameters[i][0];
93-
size = parameters[i][1];
91+
var size = parameters[ i ][ 1 ];
9492

95-
materials[i] = new THREE.PointsMaterial( { size: size } );
93+
materials[ i ] = new THREE.PointsMaterial( { size: size } );
9694

97-
particles = new THREE.Points( geometry, materials[i] );
95+
var particles = new THREE.Points( geometry, materials[ i ] );
9896

9997
particles.rotation.x = Math.random() * 6;
10098
particles.rotation.y = Math.random() * 6;
@@ -107,10 +105,10 @@
107105
renderer = new THREE.WebGLRenderer();
108106
renderer.setPixelRatio( window.devicePixelRatio );
109107
renderer.setSize( window.innerWidth, window.innerHeight );
110-
container.appendChild( renderer.domElement );
108+
document.body.appendChild( renderer.domElement );
111109

112110
stats = new Stats();
113-
container.appendChild( stats.dom );
111+
document.body.appendChild( stats.dom );
114112

115113
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
116114
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
@@ -187,7 +185,7 @@
187185

188186
camera.lookAt( scene.position );
189187

190-
for ( i = 0; i < scene.children.length; i ++ ) {
188+
for ( var i = 0; i < scene.children.length; i ++ ) {
191189

192190
var object = scene.children[ i ];
193191

@@ -199,12 +197,12 @@
199197

200198
}
201199

202-
for ( i = 0; i < materials.length; i ++ ) {
200+
for ( var i = 0; i < materials.length; i ++ ) {
203201

204-
color = parameters[i][0];
202+
var color = parameters[ i ][ 0 ];
205203

206-
h = ( 360 * ( color[0] + time ) % 360 ) / 360;
207-
materials[i].color.setHSL( h, color[1], color[2] );
204+
var h = ( 360 * ( color[ 0 ] + time ) % 360 ) / 360;
205+
materials[ i ].color.setHSL( h, color[ 1 ], color[ 2 ] );
208206

209207
}
210208

0 commit comments

Comments
 (0)