Skip to content

Commit c5de981

Browse files
mrdoobmrdoob
authored
Merge pull request #13933 from Mugen87/dev11
Examples: Clean up
2 parents f580da2 + 8b7f65e commit c5de981

7 files changed

+57
-33
lines changed

‎examples/webgl_buffergeometry_drawcalls.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
group = new THREE.Group();
107107
scene.add( group );
108108

109-
var helper = new THREE.BoxHelper( new THREE.Mesh( new THREE.BoxGeometry( r, r, r ) ) );
109+
var helper = new THREE.BoxHelper( new THREE.Mesh( new THREE.BoxBufferGeometry( r, r, r ) ) );
110110
helper.material.color.setHex( 0x080808 );
111111
helper.material.blending = THREE.AdditiveBlending;
112112
helper.material.transparent = true;

‎examples/webgl_effects_peppersghost.html‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -71,17 +71,36 @@
7171

7272
// Cube
7373

74-
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
74+
var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
75+
geometry = geometry.toNonIndexed(); // ensure unique vertices for each triangle
7576

76-
for ( var i = 0; i < geometry.faces.length; i += 2 ) {
77+
var position = geometry.attributes.position;
78+
var colors = [];
79+
var color = new THREE.Color();
7780

78-
var hex = Math.random() * 0xffffff;
79-
geometry.faces[ i ].color.setHex( hex );
80-
geometry.faces[ i + 1 ].color.setHex( hex );
81+
// generate for each side of the cube a different color
82+
83+
for ( var i = 0; i < position.count; i += 6 ) {
84+
85+
color.setHex( Math.random() * 0xffffff );
86+
87+
// first face
88+
89+
colors.push( color.r, color.g, color.b );
90+
colors.push( color.r, color.g, color.b );
91+
colors.push( color.r, color.g, color.b );
92+
93+
// second face
94+
95+
colors.push( color.r, color.g, color.b );
96+
colors.push( color.r, color.g, color.b );
97+
colors.push( color.r, color.g, color.b );
8198

8299
}
83100

84-
var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, overdraw: 0.5 } );
101+
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
102+
103+
var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors, overdraw: 0.5 } );
85104

86105
for ( var i = 0; i < 10; i ++ ) {
87106

‎examples/webgl_lines_sphere.html‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -69,11 +69,6 @@
6969

7070
function init() {
7171

72-
var container;
73-
74-
container = document.createElement( 'div' );
75-
document.body.appendChild( container );
76-
7772
camera = new THREE.PerspectiveCamera( 80, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 3000 );
7873
camera.position.z = 1000;
7974

@@ -93,7 +88,7 @@
9388

9489
line = new THREE.LineSegments( geometry, material );
9590
line.scale.x = line.scale.y = line.scale.z = p[ 0 ];
96-
line.originalScale = p[ 0 ];
91+
line.userData.originalScale = p[ 0 ];
9792
line.rotation.y = Math.random() * Math.PI;
9893
line.updateMatrix();
9994
scene.add( line );
@@ -103,7 +98,7 @@
10398
renderer = new THREE.WebGLRenderer( { antialias: true } );
10499
renderer.setPixelRatio( window.devicePixelRatio );
105100
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
106-
container.appendChild( renderer.domElement );
101+
document.body.appendChild( renderer.domElement );
107102

108103
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
109104
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
@@ -121,7 +116,7 @@
121116

122117
scene.traverse( function ( object ) {
123118

124-
if ( object instanceof THREE.Line ) {
119+
if ( object.isLine ) {
125120

126121
object.geometry.dispose();
127122
object.geometry = geometry;
@@ -136,25 +131,29 @@
136131

137132
function createGeometry() {
138133

139-
var geometry = new THREE.Geometry();
134+
var geometry = new THREE.BufferGeometry();
135+
var vertices = [];
136+
137+
var vertex = new THREE.Vector3();
140138

141139
for ( var i = 0; i < 1500; i ++ ) {
142140

143-
var vertex1 = new THREE.Vector3();
144-
vertex1.x = Math.random() * 2 - 1;
145-
vertex1.y = Math.random() * 2 - 1;
146-
vertex1.z = Math.random() * 2 - 1;
147-
vertex1.normalize();
148-
vertex1.multiplyScalar( r );
141+
vertex.x = Math.random() * 2 - 1;
142+
vertex.y = Math.random() * 2 - 1;
143+
vertex.z = Math.random() * 2 - 1;
144+
vertex.normalize();
145+
vertex.multiplyScalar( r );
149146

150-
var vertex2 = vertex1.clone();
151-
vertex2.multiplyScalar( Math.random() * 0.09 + 1 );
147+
vertices.push( vertex.x, vertex.y, vertex.z );
152148

153-
geometry.vertices.push( vertex1 );
154-
geometry.vertices.push( vertex2 );
149+
vertex.multiplyScalar( Math.random() * 0.09 + 1 );
150+
151+
vertices.push( vertex.x, vertex.y, vertex.z );
155152

156153
}
157154

155+
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
156+
158157
return geometry;
159158

160159
}
@@ -227,11 +226,17 @@
227226

228227
var object = scene.children[ i ];
229228

230-
if ( object instanceof THREE.Line ) {
229+
if ( object.isLine ) {
231230

232231
object.rotation.y = time * ( i < 4 ? ( i + 1 ) : - ( i + 1 ) );
233232

234-
if ( i < 5 ) object.scale.x = object.scale.y = object.scale.z = object.originalScale * (i/5+1) * (1 + 0.5 * Math.sin( 7*time ) );
233+
if ( i < 5 ) {
234+
235+
var scale = object.userData.originalScale * ( i / 5 + 1 ) * ( 1 + 0.5 * Math.sin( 7 * time ) );
236+
237+
object.scale.x = object.scale.y = object.scale.z = scale;
238+
239+
}
235240

236241
}
237242

‎examples/webgl_loader_nrrd.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,8 +112,8 @@
112112
sliceX;
113113

114114
//box helper to see the extend of the volume
115-
var geometry = new THREE.BoxGeometry( volume.xLength, volume.yLength, volume.zLength );
116-
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
115+
var geometry = new THREE.BoxBufferGeometry( volume.xLength, volume.yLength, volume.zLength );
116+
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
117117
var cube = new THREE.Mesh( geometry, material );
118118
cube.visible = false;
119119
var box = new THREE.BoxHelper( cube );

‎examples/webgl_loader_obj2_meshspray.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -426,7 +426,7 @@
426426
var helper = new THREE.GridHelper( 1200, 60, 0xFF4444, 0x404040 );
427427
this.scene.add( helper );
428428

429-
var geometry = new THREE.BoxGeometry( 10, 10, 10 );
429+
var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
430430
var material = new THREE.MeshNormalMaterial();
431431
this.cube = new THREE.Mesh( geometry, material );
432432
this.cube.position.set( 0, 0, 0 );

‎examples/webgl_loader_obj2_options.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@
142142
var helper = new THREE.GridHelper( 1200, 60, 0xFF4444, 0x404040 );
143143
this.scene.add( helper );
144144

145-
var geometry = new THREE.BoxGeometry( 10, 10, 10 );
145+
var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
146146
var material = new THREE.MeshNormalMaterial();
147147
this.cube = new THREE.Mesh( geometry, material );
148148
this.cube.position.set( 0, 0, 0 );

‎examples/webgl_loader_obj2_run_director.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@
154154
this.scene.add( directionalLight2 );
155155
this.scene.add( ambientLight );
156156

157-
var geometry = new THREE.BoxGeometry( 10, 10, 10 );
157+
var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
158158
var material = new THREE.MeshNormalMaterial();
159159
this.cube = new THREE.Mesh( geometry, material );
160160
this.cube.position.set( 0, 0, 0 );

0 commit comments

Comments
 (0)