threejs-custom-buffergeometry.js

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 );

			},
		},
	} );

}