86 lines
2.4 KiB
TypeScript
86 lines
2.4 KiB
TypeScript
import { Globe } from './globe';
|
|
import { Renderer } from './renderer';
|
|
import { DirectionalLight } from 'three';
|
|
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
|
|
import './style.css';
|
|
import { GUI } from 'dat.gui';
|
|
|
|
const main = new Renderer();
|
|
|
|
const dirLight = new DirectionalLight(0xffffff, 1);
|
|
dirLight.position.set(10, 10, 10);
|
|
main.scene.add(dirLight);
|
|
|
|
const globe = new Globe(1);
|
|
main.resize();
|
|
globe.initialize(dirLight).catch(console.error);
|
|
main.scene.add(globe);
|
|
|
|
main.camera.position.set(0, 0, 2);
|
|
|
|
const control = new OrbitControls(main.camera, main.canvas);
|
|
|
|
const gui = new GUI();
|
|
const atmosGui = gui.addFolder('Atmosphere');
|
|
const updateAtmosShader = () => {
|
|
globe.atmosphere.setUniforms(globe.atmosphere.shader);
|
|
globe.atmosphere.setUniforms(globe.earthMaterial!);
|
|
};
|
|
// any's because for some reason the generic expects a string indexed record
|
|
atmosGui
|
|
.add<any>(globe.atmosphere.Wavelength, 'x', 0, 1)
|
|
.name('R')
|
|
.onChange(updateAtmosShader);
|
|
atmosGui
|
|
.add<any>(globe.atmosphere.Wavelength, 'y', 0, 1)
|
|
.name('G')
|
|
.onChange(updateAtmosShader);
|
|
atmosGui
|
|
.add<any>(globe.atmosphere.Wavelength, 'z', 0, 1)
|
|
.name('B')
|
|
.onChange(updateAtmosShader);
|
|
|
|
atmosGui
|
|
.add<any>(globe.atmosphere, 'thickness', 0.001, 0.5)
|
|
.name('Thickness')
|
|
.onChange(updateAtmosShader);
|
|
atmosGui
|
|
.add<any>(globe.atmosphere, 'ScaleDepth', 0.01, 1)
|
|
.name('Scale depth')
|
|
.onChange(updateAtmosShader);
|
|
atmosGui
|
|
.add<any>(globe.atmosphere, 'Rayleigh', 0.0001, 0.01)
|
|
.onChange(updateAtmosShader);
|
|
atmosGui
|
|
.add<any>(globe.atmosphere, 'Mie', 0.0001, 0.01)
|
|
.onChange(updateAtmosShader);
|
|
atmosGui
|
|
.add<any>(globe.atmosphere, 'Exposure', 0, 100)
|
|
.onChange(updateAtmosShader);
|
|
atmosGui.open();
|
|
|
|
const planetGui = gui.addFolder('Planet');
|
|
planetGui
|
|
.add<any>(globe.rotation, 'x', -Math.PI * 2, Math.PI * 2, 0.01)
|
|
.name('Rotation X');
|
|
planetGui
|
|
.add<any>(globe.rotation, 'y', -Math.PI * 2, Math.PI * 2, 0.01)
|
|
.name('Rotation Y');
|
|
planetGui
|
|
.add<any>(globe.rotation, 'z', -Math.PI * 2, Math.PI * 2, 0.01)
|
|
.name('Rotation Z');
|
|
// planetGui.add<any>(globe, 'radius', 1, 100).name('Radius');
|
|
planetGui.open();
|
|
|
|
function tick() {
|
|
requestAnimationFrame(tick);
|
|
control.update();
|
|
// globe.rotateY(Math.PI * 0.0005);
|
|
main.render();
|
|
globe.tick();
|
|
}
|
|
|
|
window.addEventListener('resize', () => main.resize());
|
|
document.querySelector('#app')?.appendChild(main.canvas);
|
|
tick();
|