You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
1.8 KiB
JavaScript
81 lines
1.8 KiB
JavaScript
2 months ago
|
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 );
|
||
|
|
|
||
|
|
},
|
||
|
|
},
|
||
|
|
} );
|
||
|
|
|
||
|
|
}
|