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.
143 lines
3.1 KiB
JavaScript
143 lines
3.1 KiB
JavaScript
import * as THREE from 'three';
|
|
import { threejsLessonUtils } from './threejs-lesson-utils.js';
|
|
import { GUI } from '../../examples/jsm/libs/lil-gui.module.min.js';
|
|
|
|
{
|
|
|
|
class DegRadHelper {
|
|
|
|
constructor( obj, prop ) {
|
|
|
|
this.obj = obj;
|
|
this.prop = prop;
|
|
|
|
}
|
|
get value() {
|
|
|
|
return THREE.MathUtils.radToDeg( this.obj[ this.prop ] );
|
|
|
|
}
|
|
set value( v ) {
|
|
|
|
this.obj[ this.prop ] = THREE.MathUtils.degToRad( v );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function scaleCube( zOffset ) {
|
|
|
|
const root = new THREE.Object3D();
|
|
|
|
const size = 3;
|
|
const geometry = new THREE.BoxGeometry( size, size, size );
|
|
geometry.applyMatrix4( new THREE.Matrix4().makeTranslation( 0, 0, zOffset * size ) );
|
|
const material = new THREE.MeshBasicMaterial( {
|
|
color: 'red',
|
|
} );
|
|
const cube = new THREE.Mesh( geometry, material );
|
|
root.add( cube );
|
|
cube.add( new THREE.LineSegments(
|
|
new THREE.EdgesGeometry( geometry ),
|
|
new THREE.LineBasicMaterial( { color: 'white' } ) ) );
|
|
|
|
[[ 0, 0 ], [ 1, 0 ], [ 0, 1 ]].forEach( ( rot ) => {
|
|
|
|
const size = 10;
|
|
const divisions = 10;
|
|
const gridHelper = new THREE.GridHelper( size, divisions );
|
|
root.add( gridHelper );
|
|
gridHelper.rotation.x = rot[ 0 ] * Math.PI * .5;
|
|
gridHelper.rotation.z = rot[ 1 ] * Math.PI * .5;
|
|
|
|
} );
|
|
|
|
return {
|
|
obj3D: root,
|
|
update: ( time ) => {
|
|
|
|
const s = THREE.MathUtils.lerp( 0.5, 2, Math.sin( time ) * .5 + .5 );
|
|
cube.scale.set( s, s, s );
|
|
|
|
},
|
|
};
|
|
|
|
}
|
|
|
|
threejsLessonUtils.addDiagrams( {
|
|
scaleCenter: {
|
|
create() {
|
|
|
|
return scaleCube( 0 );
|
|
|
|
},
|
|
},
|
|
scalePositiveZ: {
|
|
create() {
|
|
|
|
return scaleCube( .5 );
|
|
|
|
},
|
|
},
|
|
lonLatPos: {
|
|
create( info ) {
|
|
|
|
const { scene, camera, renderInfo } = info;
|
|
const size = 10;
|
|
const divisions = 10;
|
|
const gridHelper = new THREE.GridHelper( size, divisions );
|
|
scene.add( gridHelper );
|
|
|
|
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
|
|
|
|
const lonHelper = new THREE.Object3D();
|
|
scene.add( lonHelper );
|
|
const latHelper = new THREE.Object3D();
|
|
lonHelper.add( latHelper );
|
|
const positionHelper = new THREE.Object3D();
|
|
latHelper.add( positionHelper );
|
|
|
|
{
|
|
|
|
const lonMesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 'green' } ) );
|
|
lonMesh.scale.set( 0.2, 1, 0.2 );
|
|
lonHelper.add( lonMesh );
|
|
|
|
}
|
|
|
|
{
|
|
|
|
const latMesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 'blue' } ) );
|
|
latMesh.scale.set( 1, 0.25, 0.25 );
|
|
latHelper.add( latMesh );
|
|
|
|
}
|
|
|
|
{
|
|
|
|
const geometry = new THREE.SphereGeometry( 0.1, 24, 12 );
|
|
const posMesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 'red' } ) );
|
|
posMesh.position.z = 1;
|
|
positionHelper.add( posMesh );
|
|
|
|
}
|
|
|
|
camera.position.set( 1, 1.5, 1.5 );
|
|
camera.lookAt( 0, 0, 0 );
|
|
|
|
const gui = new GUI( { autoPlace: false } );
|
|
renderInfo.elem.appendChild( gui.domElement );
|
|
gui.add( new DegRadHelper( lonHelper.rotation, 'y' ), 'value', - 180, 180 ).name( 'lonHelper x rotation' );
|
|
gui.add( new DegRadHelper( latHelper.rotation, 'x' ), 'value', - 90, 90 ).name( 'latHelper y rotation' );
|
|
|
|
return {
|
|
trackball: false,
|
|
};
|
|
|
|
},
|
|
},
|
|
} );
|
|
|
|
}
|
|
|