Skip to content

Commit 6b2da21

Browse files
mrdoobmrdoob
authored
Merge pull request #21004 from Mugen87/dev41
Examples: Clean up.
2 parents 210c33f + d793913 commit 6b2da21

File tree

2 files changed

+76
-47
lines changed

2 files changed

+76
-47
lines changed

‎examples/webgl_custom_attributes_points2.html‎

Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@
5555

5656
import Stats from './jsm/libs/stats.module.js';
5757

58+
import { BufferGeometryUtils } from './jsm/utils/BufferGeometryUtils.js';
59+
5860
let renderer, scene, camera, stats;
5961
let sphere, length1;
6062

@@ -73,23 +75,34 @@
7375

7476
const radius = 100, segments = 68, rings = 38;
7577

76-
const vertices1 = new THREE.SphereGeometry( radius, segments, rings ).vertices;
77-
const vertices2 = new THREE.BoxGeometry( 0.8 * radius, 0.8 * radius, 0.8 * radius, 10, 10, 10 ).vertices;
78+
let sphereGeometry = new THREE.SphereBufferGeometry( radius, segments, rings );
79+
let boxGeometry = new THREE.BoxBufferGeometry( 0.8 * radius, 0.8 * radius, 0.8 * radius, 10, 10, 10 );
80+
81+
// if normal and uv attributes are not removed, mergeVertices() can't consolidate indentical vertices with different normal/uv data
82+
83+
sphereGeometry.deleteAttribute( 'normal' );
84+
sphereGeometry.deleteAttribute( 'uv' );
7885

79-
length1 = vertices1.length;
86+
boxGeometry.deleteAttribute( 'normal' );
87+
boxGeometry.deleteAttribute( 'uv' );
8088

81-
const vertices = vertices1.concat( vertices2 );
89+
sphereGeometry = BufferGeometryUtils.mergeVertices( sphereGeometry );
90+
boxGeometry = BufferGeometryUtils.mergeVertices( boxGeometry );
8291

83-
const positions = new Float32Array( vertices.length * 3 );
84-
const colors = new Float32Array( vertices.length * 3 );
85-
const sizes = new Float32Array( vertices.length );
92+
const combinedGeometry = BufferGeometryUtils.mergeBufferGeometries( [ sphereGeometry, boxGeometry ] );
93+
const positionAttribute = combinedGeometry.getAttribute( 'position' );
94+
95+
const colors = [];
96+
const sizes = [];
8697

8798
const color = new THREE.Color();
99+
const vertex = new THREE.Vector3();
100+
101+
length1 = sphereGeometry.getAttribute( 'position' ).count;
88102

89-
for ( let i = 0, l = vertices.length; i < l; i ++ ) {
103+
for ( let i = 0, l = positionAttribute.count; i < l; i ++ ) {
90104

91-
const vertex = vertices[ i ];
92-
vertex.toArray( positions, i * 3 );
105+
vertex.fromBufferAttribute( positionAttribute, i );
93106

94107
if ( i < length1 ) {
95108

@@ -108,13 +121,13 @@
108121
}
109122

110123
const geometry = new THREE.BufferGeometry();
111-
geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
112-
geometry.setAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
113-
geometry.setAttribute( 'ca', new THREE.BufferAttribute( colors, 3 ) );
124+
geometry.setAttribute( 'position', positionAttribute );
125+
geometry.setAttribute( 'size', new THREE.Float32BufferAttribute( sizes, 1 ) );
126+
geometry.setAttribute( 'ca', new THREE.Float32BufferAttribute( colors, 3 ) );
114127

115128
//
116129

117-
const texture = new THREE.TextureLoader().load( "textures/sprites/disc.png" );
130+
const texture = new THREE.TextureLoader().load( 'textures/sprites/disc.png' );
118131
texture.wrapS = THREE.RepeatWrapping;
119132
texture.wrapT = THREE.RepeatWrapping;
120133

‎examples/webgl_custom_attributes_points3.html‎

Lines changed: 49 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,8 @@
6363

6464
import Stats from './jsm/libs/stats.module.js';
6565

66+
import { BufferGeometryUtils } from './jsm/utils/BufferGeometryUtils.js';
67+
6668
let renderer, scene, camera, stats;
6769

6870
let object;
@@ -84,28 +86,36 @@
8486

8587
let radius = 100;
8688
const inner = 0.6 * radius;
89+
const vertex = new THREE.Vector3();
8790
const vertices = [];
8891

8992
for ( let i = 0; i < 100000; i ++ ) {
9093

91-
const vertex = new THREE.Vector3();
9294
vertex.x = Math.random() * 2 - 1;
9395
vertex.y = Math.random() * 2 - 1;
9496
vertex.z = Math.random() * 2 - 1;
9597
vertex.multiplyScalar( radius );
9698

9799
if ( ( vertex.x > inner || vertex.x < - inner ) ||
98-
( vertex.y > inner || vertex.y < - inner ) ||
99-
( vertex.z > inner || vertex.z < - inner ) )
100+
( vertex.y > inner || vertex.y < - inner ) ||
101+
( vertex.z > inner || vertex.z < - inner ) )
100102

101-
vertices.push( vertex );
103+
vertices.push( vertex.x, vertex.y, vertex.z );
102104

103105
}
104106

105-
vertices1 = vertices.length;
107+
vertices1 = vertices.length / 3;
106108

107109
radius = 200;
108-
const geometry2 = new THREE.BoxGeometry( radius, 0.1 * radius, 0.1 * radius, 50, 5, 5 );
110+
111+
let boxGeometry1 = new THREE.BoxBufferGeometry( radius, 0.1 * radius, 0.1 * radius, 50, 5, 5 );
112+
113+
// if normal and uv attributes are not removed, mergeVertices() can't consolidate indentical vertices with different normal/uv data
114+
115+
boxGeometry1.deleteAttribute( 'normal' );
116+
boxGeometry1.deleteAttribute( 'uv' );
117+
118+
boxGeometry1 = BufferGeometryUtils.mergeVertices( boxGeometry1 );
109119

110120
const matrix = new THREE.Matrix4();
111121
const position = new THREE.Vector3();
@@ -120,48 +130,54 @@
120130

121131
matrix.compose( position, quaternion.setFromEuler( rotation ), scale );
122132

123-
for ( var i = 0, l = geo.vertices.length; i < l; i ++ ) {
133+
const positionAttribute = geo.getAttribute( 'position' );
124134

125-
const vertex = geo.vertices[ i ];
126-
vertices.push( vertex.clone().applyMatrix4( matrix ) );
135+
for ( var i = 0, l = positionAttribute.count; i < l; i ++ ) {
136+
137+
vertex.fromBufferAttribute( positionAttribute, i );
138+
vertex.applyMatrix4( matrix );
139+
vertices.push( vertex.x, vertex.y, vertex.z );
127140

128141
}
129142

130143
}
131144

132145
// side 1
133146

134-
addGeo( geometry2, 0, 110, 110, 0 );
135-
addGeo( geometry2, 0, 110, - 110, 0 );
136-
addGeo( geometry2, 0, - 110, 110, 0 );
137-
addGeo( geometry2, 0, - 110, - 110, 0 );
147+
addGeo( boxGeometry1, 0, 110, 110, 0 );
148+
addGeo( boxGeometry1, 0, 110, - 110, 0 );
149+
addGeo( boxGeometry1, 0, - 110, 110, 0 );
150+
addGeo( boxGeometry1, 0, - 110, - 110, 0 );
138151

139152
// side 2
140153

141-
addGeo( geometry2, 110, 110, 0, Math.PI / 2 );
142-
addGeo( geometry2, 110, - 110, 0, Math.PI / 2 );
143-
addGeo( geometry2, - 110, 110, 0, Math.PI / 2 );
144-
addGeo( geometry2, - 110, - 110, 0, Math.PI / 2 );
154+
addGeo( boxGeometry1, 110, 110, 0, Math.PI / 2 );
155+
addGeo( boxGeometry1, 110, - 110, 0, Math.PI / 2 );
156+
addGeo( boxGeometry1, - 110, 110, 0, Math.PI / 2 );
157+
addGeo( boxGeometry1, - 110, - 110, 0, Math.PI / 2 );
145158

146159
// corner edges
147160

148-
const geometry3 = new THREE.BoxGeometry( 0.1 * radius, radius * 1.2, 0.1 * radius, 5, 60, 5 );
161+
let boxGeometry2 = new THREE.BoxBufferGeometry( 0.1 * radius, radius * 1.2, 0.1 * radius, 5, 60, 5 );
149162

150-
addGeo( geometry3, 110, 0, 110, 0 );
151-
addGeo( geometry3, 110, 0, - 110, 0 );
152-
addGeo( geometry3, - 110, 0, 110, 0 );
153-
addGeo( geometry3, - 110, 0, - 110, 0 );
163+
boxGeometry2.deleteAttribute( 'normal' );
164+
boxGeometry2.deleteAttribute( 'uv' );
154165

155-
const positions = new Float32Array( vertices.length * 3 );
156-
const colors = new Float32Array( vertices.length * 3 );
157-
const sizes = new Float32Array( vertices.length );
166+
boxGeometry2 = BufferGeometryUtils.mergeVertices( boxGeometry2 );
158167

159-
const color = new THREE.Color();
168+
addGeo( boxGeometry2, 110, 0, 110, 0 );
169+
addGeo( boxGeometry2, 110, 0, - 110, 0 );
170+
addGeo( boxGeometry2, - 110, 0, 110, 0 );
171+
addGeo( boxGeometry2, - 110, 0, - 110, 0 );
172+
173+
const positionAttribute = new THREE.Float32BufferAttribute( vertices, 3 );
160174

161-
for ( let i = 0; i < vertices.length; i ++ ) {
175+
const colors = [];
176+
const sizes = [];
177+
178+
const color = new THREE.Color();
162179

163-
const vertex = vertices[ i ];
164-
vertex.toArray( positions, i * 3 );
180+
for ( let i = 0; i < positionAttribute.count; i ++ ) {
165181

166182
if ( i < vertices1 ) {
167183

@@ -180,13 +196,13 @@
180196
}
181197

182198
const geometry = new THREE.BufferGeometry();
183-
geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
184-
geometry.setAttribute( 'ca', new THREE.BufferAttribute( colors, 3 ) );
185-
geometry.setAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
199+
geometry.setAttribute( 'position', positionAttribute );
200+
geometry.setAttribute( 'ca', new THREE.Float32BufferAttribute( colors, 3 ) );
201+
geometry.setAttribute( 'size', new THREE.Float32BufferAttribute( sizes, 1 ) );
186202

187203
//
188204

189-
const texture = new THREE.TextureLoader().load( "textures/sprites/ball.png" );
205+
const texture = new THREE.TextureLoader().load( 'textures/sprites/ball.png' );
190206
texture.wrapS = THREE.RepeatWrapping;
191207
texture.wrapT = THREE.RepeatWrapping;
192208

0 commit comments

Comments
 (0)