earf

by mars91

HTML

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
    
<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three/build/three.module.js",
      "three/addons/": "https://unpkg.com/three/examples/jsm/"
		}
	}
</script>

CSS

body {
	margin: 0px;
}

JavaScript

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

let renderer, scene, camera, controls, earth, sun, time;

////// ---- Shaders ---- ////////

const EARHRADIUS = 1.0;
const atmosphere = {
    Kr: 0.0025,
    Km: 0.0010,
    ESun: 20.0, //recnet change 20-->17
    g: -0.950,
    innerRadius: EARHRADIUS,
    outerRadius: 1.025*EARHRADIUS,
    wavelength: [0.650, 0.570, 0.475],
    scaleDepth: 0.25,
    mieScaleDepth: 0.1
};

const AtmUniforms = {
    v3LightPosition: {type: "v3",value: new THREE.Vector3(1, 0, 0).normalize()},
    cPs: {type: "v3",value: new THREE.Vector3(1, 0, 0)},
    v3InvWavelength: {type: "v3",value: new THREE.Vector3(1 / Math.pow(atmosphere.wavelength[0], 4), 1 / Math.pow(atmosphere.wavelength[1], 4), 1 / Math.pow(atmosphere.wavelength[2], 4))},
    fCameraHeight: {type: "f",value: 0},
    fCameraHeight2: {type: "f",value: 0},
    fInnerRadius: {type: "f",value: atmosphere.innerRadius},
    fInnerRadius2: {type: "f",value: atmosphere.innerRadius * atmosphere.innerRadius},
    fOuterRadius: {type: "f",value: atmosphere.outerRadius},
    fOuterRadius2: {type: "f",value: atmosphere.outerRadius * atmosphere.outerRadius},
    fKrESun: {type: "f",value: atmosphere.Kr * atmosphere.ESun},
    fKmESun: {type: "f",value: atmosphere.Km * atmosphere.ESun},
    fKr4PI: {type: "f",value: atmosphere.Kr * 4.0 * Math.PI},
    fKm4PI: {type: "f",value: atmosphere.Km * 4.0 * Math.PI},
    fScale: {type: "f",value: 1 / (atmosphere.outerRadius - atmosphere.innerRadius)},
    fScaleDepth: {type: "f",value: atmosphere.scaleDepth},
    fScaleOverScaleDepth: {type: "f",value: 1 / (atmosphere.outerRadius - atmosphere.innerRadius) / atmosphere.scaleDepth},
    g: {type: "f",value: atmosphere.g},
    g2: {type: "f",value: atmosphere.g * atmosphere.g},
    nSamples: {type: "i",value: 3},
    fSamples: {type: "f",value: 3.0},
    tDisplacement: {type: "t",value: 0},
    tSkyboxDiffuse: {type: "t",value: 0},
   ...