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.
 
 
 
 
 

113 lines
3.3 KiB

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