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.
78 lines
1.7 KiB
JavaScript
78 lines
1.7 KiB
JavaScript
2 months ago
|
import * as THREE from 'three';
|
||
|
|
import * as BufferGeometryUtils from '../../examples/jsm/utils/BufferGeometryUtils.js';
|
||
|
|
import { threejsLessonUtils } from './threejs-lesson-utils.js';
|
||
|
|
|
||
|
|
{
|
||
|
|
|
||
|
|
const darkMatcher = window.matchMedia( '(prefers-color-scheme: dark)' );
|
||
|
|
const isDarkMode = darkMatcher.matches;
|
||
|
|
|
||
|
|
const darkColors = {
|
||
|
|
wire: '#DDD',
|
||
|
|
};
|
||
|
|
const lightColors = {
|
||
|
|
wire: '#000',
|
||
|
|
};
|
||
|
|
const colors = isDarkMode ? darkColors : lightColors;
|
||
|
|
|
||
|
|
|
||
|
|
threejsLessonUtils.addDiagrams( {
|
||
|
|
mergedCubes: {
|
||
|
|
create() {
|
||
|
|
|
||
|
|
const geometries = [];
|
||
|
|
const width = 3;
|
||
|
|
const height = 2;
|
||
|
|
const depth = 2;
|
||
|
|
for ( let y = 0; y < height; ++ y ) {
|
||
|
|
|
||
|
|
for ( let z = 0; z < depth; ++ z ) {
|
||
|
|
|
||
|
|
for ( let x = 0; x < width; ++ x ) {
|
||
|
|
|
||
|
|
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
|
||
|
|
geometry.applyMatrix4( ( new THREE.Matrix4() ).makeTranslation( x, y, z ) );
|
||
|
|
geometries.push( geometry );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
const mergedGeometry = BufferGeometryUtils.mergeGeometries( geometries, false );
|
||
|
|
const material = new THREE.MeshBasicMaterial( {
|
||
|
|
color: colors.wire,
|
||
|
|
wireframe: true,
|
||
|
|
} );
|
||
|
|
const mesh = new THREE.Mesh( mergedGeometry, material );
|
||
|
|
mesh.position.set(
|
||
|
|
0.5 - width / 2,
|
||
|
|
0.5 - height / 2,
|
||
|
|
0.5 - depth / 2 );
|
||
|
|
const base = new THREE.Object3D();
|
||
|
|
base.add( mesh );
|
||
|
|
base.scale.setScalar( 3.5 );
|
||
|
|
return base;
|
||
|
|
|
||
|
|
},
|
||
|
|
},
|
||
|
|
culledCubes: {
|
||
|
|
create() {
|
||
|
|
|
||
|
|
const geometry = new THREE.BoxGeometry( 3, 2, 2, 3, 2, 2 );
|
||
|
|
const material = new THREE.MeshBasicMaterial( {
|
||
|
|
color: colors.wire,
|
||
|
|
wireframe: true,
|
||
|
|
} );
|
||
|
|
const mesh = new THREE.Mesh( geometry, material );
|
||
|
|
mesh.scale.setScalar( 3.5 );
|
||
|
|
return mesh;
|
||
|
|
|
||
|
|
},
|
||
|
|
},
|
||
|
|
} );
|
||
|
|
|
||
|
|
}
|
||
|
|
|