1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import * as THREE from 'three';
import { threejsLessonUtils } from './threejs-lesson-utils.js';
{
const loader = new THREE.TextureLoader();
const texture = loader.load( '/manual/examples/resources/images/star-light.png' );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 3, 1 );
function makeMesh( geometry ) {
const material = new THREE.MeshPhongMaterial( {
color: 'hsl(300,50%,50%)',
side: THREE.DoubleSide,
map: texture,
} );
return new THREE.Mesh( geometry, material );
}
threejsLessonUtils.addDiagrams( {
geometryCylinder: {
create() {
return new THREE.Object3D();
},
},
bufferGeometryCylinder: {
create() {
const numSegments = 24;
const positions = [];
const uvs = [];
for ( let s = 0; s <= numSegments; ++ s ) {
const u = s / numSegments;
const a = u * Math.PI * 2;
const x = Math.sin( a );
const z = Math.cos( a );
positions.push( x, - 1, z );
positions.push( x, 1, z );
uvs.push( u, 0 );
uvs.push( u, 1 );
}
const indices = [];
for ( let s = 0; s < numSegments; ++ s ) {
const ndx = s * 2;
indices.push(
ndx, ndx + 2, ndx + 1,
ndx + 1, ndx + 2, ndx + 3,
);
}
const positionNumComponents = 3;
const uvNumComponents = 2;
const geometry = new THREE.BufferGeometry();
geometry.setAttribute(
'position',
new THREE.BufferAttribute( new Float32Array( positions ), positionNumComponents ) );
geometry.setAttribute(
'uv',
new THREE.BufferAttribute( new Float32Array( uvs ), uvNumComponents ) );
geometry.setIndex( indices );
geometry.computeVertexNormals();
geometry.scale( 5, 5, 5 );
return makeMesh( geometry );
},
},
} );
}