You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
2.0 KiB
70 lines
2.0 KiB
import * as THREE from 'three';
|
|
import {threejsLessonUtils} from './threejs-lesson-utils.js';
|
|
|
|
{
|
|
function addShape(color, geometry) {
|
|
const material = new THREE.MeshPhongMaterial({color});
|
|
return new THREE.Mesh(geometry, material);
|
|
}
|
|
|
|
threejsLessonUtils.addDiagrams({
|
|
shapeCube: {
|
|
create() {
|
|
const width = 8;
|
|
const height = 8;
|
|
const depth = 8;
|
|
return addShape('hsl(150,100%,40%)', new THREE.BoxGeometry(width, height, depth));
|
|
},
|
|
},
|
|
shapeCone: {
|
|
create() {
|
|
const radius = 6;
|
|
const height = 8;
|
|
const segments = 24;
|
|
return addShape('hsl(160,100%,40%)', new THREE.ConeGeometry(radius, height, segments));
|
|
},
|
|
},
|
|
shapeCylinder: {
|
|
create() {
|
|
const radiusTop = 4;
|
|
const radiusBottom = 4;
|
|
const height = 8;
|
|
const radialSegments = 24;
|
|
return addShape('hsl(170,100%,40%)', new THREE.CylinderGeometry(radiusTop, radiusBottom, height, radialSegments));
|
|
},
|
|
},
|
|
shapeSphere: {
|
|
create() {
|
|
const radius = 5;
|
|
const widthSegments = 24;
|
|
const heightSegments = 16;
|
|
return addShape('hsl(180,100%,40%)', new THREE.SphereGeometry(radius, widthSegments, heightSegments));
|
|
},
|
|
},
|
|
shapeFrustum: {
|
|
create() {
|
|
const width = 8;
|
|
const height = 8;
|
|
const depth = 8;
|
|
const geometry = new THREE.BoxGeometry(width, height, depth);
|
|
const perspMat = new THREE.Matrix4();
|
|
perspMat.makePerspective(-3, 3, -3, 3, 4, 12);
|
|
const inMat = new THREE.Matrix4();
|
|
inMat.makeTranslation(0, 0, 8);
|
|
|
|
const mat = new THREE.Matrix4();
|
|
mat.multiply(perspMat);
|
|
mat.multiply(inMat);
|
|
|
|
geometry.applyMatrix4(mat);
|
|
geometry.computeBoundingBox();
|
|
geometry.center();
|
|
geometry.scale(3, 3, 3);
|
|
geometry.rotateY(Math.PI);
|
|
geometry.computeVertexNormals();
|
|
|
|
return addShape('hsl(190,100%,40%)', geometry);
|
|
},
|
|
},
|
|
});
|
|
}
|