Getting Started

Planet Pop - Embed Realistic Sun & Planets on Any Page is a powerful, responsive and highly customizable 3D scene that lets you place a glowing Sun, planets, Earth with its Moon, a nebula background and an animated rocket on any web page.

It is built using EcmaScript 6 and modern JavaScript and CSS standards. The 3D spheres, rocket and nebula use Three.js and custom WebGL shaders that run entirely on the GPU, so everything stays smooth and performant on desktop and mobile.

All distances and sizes are defined in abstract world units, not pixels. Because the scene runs in 3D space (with camera position, perspective and rotation), you should adjust position and scale by eye until it fits your layout instead of relying on exact pixel values.

Planet Pop must run over HTTP or HTTPS, it will not work when opened directly from the local file system.

Installation

Choose one of the preset HTML files from the build folder and open it in a text editor as a refference.

In the download files inside the build folder you will find the src folder that contains the JavaScript code and content folder that contains the CSS file and other important files like the ripple brush texture, the content folder has to be uploaded on the server where The grid is used.

Use the any HTML file from the build folder as refference.

Include the Planet Pop CSS file and JavaScript in the header:

<head>

<!-- ... -->
<link rel="stylesheet" href="./content/global.css">
<script type="text/javascript" src="./src/FWDPP.js"></script>
<!-- ... -->	

</head>

The next step is to add the initialize code in the page header or footer after the inclusion of the Planet Pop JavaScript and CSS files.

<script type="text/javascript">
	if(document.readyState == 'complete'){
		fwdppSetupPP();
	}else{
		document.addEventListener('DOMContentLoaded', ()=>{
			fwdppSetupPP();
		});
	}

	function fwdppSetupPP(){

		new FWDPP({
			
			// Main settings.  
			instance: 'fwdpp0',
			displayType: 'responsive',
			parentId: 'myDiv',
			texturesFolder: './content/textures/',
			alllowSpin: 'yes',
			allowScaleAndDrag: 'no',
			useTeleportTransition: 'no',
			paralax: 'no',
			paralaxAmount: 0.5,
			scaleOnScroll: 'yes',
			initialScale: 5.0,
			scrollScaleAnchor: 1,
			maxWidth: 1920,
			maxHeight: 900,
			autoScaleStartWidth: 1200,
			autoScale: 'yes',
			backgroundColor: '#0D0D0D',
			showGUI: 'yes',

			// Rocket
			showRocket: 'yes',
			rocketPosition: {tx: -1.503, ty: 0.25, tz: 0, rx: -3.128, ry: -0.459, rz: 3.131, sx: 0.1, sy: 0.1, sz: 0.1},
			rocketSpinSpeed: 2,
			animateRoket: 'yes',
			rocketFlySpeed: 1,
			rocketExitOvershoot: 3, // How far above the top before despawn (world units)
			rocketVelocityMagnitude: 20,
			rocketParticleSize: 1.2,
			roketParticlesOffsetY: -2.5,
			rocketLaunchIntervalMinSec: 1,
			rocketLaunchIntervalMaxSec: 20,
			
			// Nebula background 
			showNebulaPlane: 'yes',
			nebulaTintColor: '#ffffff',
			nebulaBaseColor: '#ffffff',
			nebulaCloudColor: '#ffffff',
			nebulaTintStrength: 0.0,
			nebulaSaturation: 1.0,

			// Sun settings (prefixed by pass)
			// Sphere
			showSun: 'yes',
			sunSpinSpeed: 0.03,
			sunPosition: { tx: -0.01, ty: 0.022, tz: -190, rx: 0, ry: 0, rz: 0, sx: 1.35, sy: 1.35, sz: 1.35},
			sphereFresnelPower: 1.0,
			sphereFresnelInfluence: 1.2,
			sphereTint: 0.2,
			sphereBase: 4.0,
			sphereBrightnessOffset: 1.0,
			sphereBrightness: 0.6,
			sphereLockCenter: true,
			sphereVisibility: 1.0,
			sphereDirection: 1,

			// Glow
			glowRadius: 0.4,
			glowTint: 0.4,
			glowBrightness: 1.06,
			glowFalloffColor: 0.5,
			glowVisibility: 1.0,
			glowDirection: 1,

			// Rays
			raysWidth: 0.08,
			raysLength: 0.14,
			raysOpacity: 0.05,
			raysNoiseFrequency: 8.0,
			raysNoiseAmplitude: 0.4,
			raysAlphaBlended: 0.3,
			raysHueSpread: 0.2,
			raysHue: 0.2,

			// Flares
			flaresWidth: 0.006,
			flaresAmp: 1.02,
			flaresOpacity: 0.2,
			flaresAlphaBlended: 0.65,
			flaresHueSpread: 0.16,
			flaresHue: 0.0,
			flaresNoiseFrequency: 4.0,
			flaresNoiseAmplitude: 0.2,

			// Saturn
			showSaturn: 'no',
			saturnSpinSpeed: 0.4492,
			saturnPosition: { tx: -1.055, ty: 0.409, tz: -170, rx: -2.772, ry: 0.415, rz: -2.855, sx: 0.793, sy: 0.793, sz: 0.793},
			saturnAtmosphereColor: '#ffdea7',
			saturnTwilightColor: '#ffdea7',
			saturnLightPhi: 0.508,
			saturnLightTheta: 0.393,
			saturnRingInner: 1.2,
			saturnRingOuter: 2.0,
			saturnRingOpacity: 0.8,

			// Jupiter
			showJupiter: 'no',
			jupiterSpinSpeed: 0.4822,
			jupiterPosition: { tx: 1.281, ty: 0.449, tz: -160, rx: 0, ry: -0.836, rz: 0, sx: 1.1, sy: 1.1, sz: 1.1},
			jupiterAtmosphereColor: '#ffdea7',
			jupiterTwilightColor: '#ffdea7',
			jupiterLightPhi: 1.134,
			jupiterLightTheta: 0.393,

			// Uranus
			showUranus: 'no',
			uranusSpinSpeed: -0.2774,
			uranusPosition: { tx: 2.446, ty: -0.459, tz: -140, rx: 0, ry: 0, rz: 0, sx: 0.733, sy: 0.733, sz: 0.733},
			uranusAtmosphereColor: '#aaffff',
			uranusTwilightColor: '#aaffff',
			uranusLightPhi: 1.134,
			uranusLightTheta: 0.393,

			// Neptune
			showNeptune: 'no',
			neptuneSpinSpeed: 0.2970,
			neptunePosition: { tx: 1.124, ty: -1.021, tz: -120, rx: -3.142, ry: 0.255, rz: -3.142, sx: 0.564, sy: 0.564, sz: 0.564},
			neptuneAtmosphereColor: '#6666ff',
			neptuneTwilightColor: '#6666ff',
			neptuneLightPhi: 1.134,
			neptuneLightTheta: 0.393,

			// Mercury
			showMercury: 'no',
			mercurySpinSpeed: 0.003402,
			mercuryPosition: { tx: 0.211, ty: -0.47, tz: -40, rx: -3.141, ry: -1.519, rz: 3.141, sx: 0.223, sy: 0.223, sz: 0.223},
			mercuryAtmosphereColor: '#000000',
			mercuryTwilightColor: '#ffffff',
			mercuryLightPhi: 1.134,
			mercuryLightTheta: 0.393,

			// Venus
			showVenus: 'no',
			venusSpinSpeed: -0.000821,
			venusPosition: { tx: -0.403, ty: -0.922, tz: -80, rx: 3.141, ry: 1.219, rz: -3.141, sx: 0.459, sy: 0.459, sz: 0.459},
			venusAtmosphereColor: '#ffdea7',
			venusTwilightColor: '#ffdea7',
			venusLightPhi: 1.134,
			venusLightTheta: 0.393,

			// Earth
			showEarth: 'no',
			earthSpinSpeed: 0.2,
			earthCloudsSpread: 0.9,
			earthPosition: { tx: -1.568, ty: -1.029, tz: -60, rx: 0, ry: -0.818, rz: -0.001, sx: 0.619, sy: 0.619, sz: 0.619},
			earthAtmosphereColor: '#00aaff',
			earthTwilightColor: '#ff6600',
			earthLightPhi: 1.134,
			earthLightTheta: 0.393,

			// Moon
			showMoon: 'no',
			moonSpinSpeed: 0.007304,
			moonPosition: {tx: -2.478, ty: -1.176, tz: -40, rx: -3.141, ry: -1.519, rz: 3.141, sx: 0.1, sy: 0.1, sz: 0.1},
			moonAtmosphereColor: '#000000',
			moonTwilightColor: '#ffffff',
			moonLightPhi: 1.134,
			moonLightTheta: 0.393, 
			
			// Mars
			showMars: 'no',
			marsSpinSpeed: 0.1944,
			marsPosition: { tx: -2.359, ty: -0.453, tz: -160, rx: -3.142, ry: -0.857, rz: 3.141, sx: 0.479, sy: 0.479, sz: 0.479},
			marshAtmosphereColor: '#e0653b',
			marsTwilightColor: '#e0653b',
			marshLightPhi: 1.134,
			marshLightTheta: 0.393,

		});

	}
        
</script>

The last step adding the Planet Pop is to create a div with an unique ID that will act as the parent/holder for the Planet Pop and set the parentId option to point to the div id ex: parentId: 'myDiv', this div can be added anywhere in your page.

<!--Planet Pop holder. --> 
<div id="myDiv"></div>

To add multiple Planet Popers just redo the steps explained above and make sure to change the instance to fwdpp1, fwdpp2, fwdpp3, etc... depending on how manygrids are added, also change the parentId to a different ID and if you want add a different grid gallery by also change the gridDataId to point to a different grid gallery.

Please read the settings section to understand the Planet Pop configuration options.

Modify code

PP is using VITE to build the built final Javascript file.

Settings

Planet Pop - Embed Realistic Sun & Planets on Any Page has many options that allows to customize it's features. They are added directly in the Planet Pop constructor as it can be seen in the installation section.

Example

<script type="text/javascript">
	if(document.readyState == 'complete'){
		fwdSetupPlanet Pops();
	}else{
		document.addEventListener('DOMContentLoaded', ()=>{
			fwdSetupPlanet Pops();
		});
	}

	function fwdSetupPlanet Pops(){
		new FWDPP({ 

			// Main settings.  
            instance: 'fwdpp0',
            displayType: 'responsive',
            parentId: 'myDiv',
            gridDataId: 'gridData',
			etc...
			
		})
	}
</script>

instance

Type: (String) - default: unset

The Planet Pop instance name, this is used to call the API. In the example file the instance name is set to fwdpp0, if you are using multiple instances just change the instance to fwdpp1, fwdpp2, fwdpp3, etc...

displayType

Type: (String) - default: responsive

Display type, how Planet Pop is sized inside the page.

responsive - sizes based on the maxWidth and maxHeight settings.
afterparent - sizes based on the parent width and height.

parentId

Type: (String) - default: unset

The Planet Pop holder/div ID, please make sure that this has an unique ID, it can be added anywhere in your page.

texturesFolder

Type: (String) - default: content/textures

The folder path where all Planet Pop textures are loaded from. This can be a relative or absolute path, but it must point to the folder that contains the textures used by the planets, sun, rocket, etc.

alllowSpin

Type: (String) - default: yes

This can be yes or no, allow spin interaction with the scene (orbit / rotation with the pointer or touch).

allowScaleAndDrag

Type: (String) - default: yes

This can be yes or no, Enable the tool that allows to get the celestials postion and size in the scene video tutorial here.

useTeleportTransition

Type: (String) - default: no

This can be yes or no, enable the teleport transition between the two Planet Pop instances.

paralax

Type: (String) - default: yes

This can be yes or no, enable parallax based on the page scroll position.

initializeWhenVisible

Type: (String) - default: yes

This can be yes or no, lazy scrolling / loading: Planet Pop is initialized only when the product is visible in the page (for example when you scroll to the section where it is added).

paralaxAmount

Type: (Number) - default: 0.18

The strength of the parallax effect when paralax is set to yes. Higher values move the scene more while scrolling.

scaleOnScroll

Type: (String) - default: yes

This can be yes or no, scale Planet Pop based on scroll position.

initialScale

Type: (Number) - default: 0.65

The initial scale of the Planet Pop scene, applied before any scroll scaling.

scrollScaleAnchor

Type: (Number) - default: 1

The scroll scale anchor, this will set the final scale point as it scrolls, a float betwee 0 a nd 1.

maxWidth

Type: (Number) - default: 1920

The maximum width in px for Planet Pop when displayType is responsive.

maxHeight

Type: (Number) - default: 800

The maximum height in px for Planet Pop when displayType is responsive.

autoScaleStartWidth

Type: (Number) - default: 1500

The browser width in px from which autoScale starts to take effect. Below this width the scene is automatically scaled down.

autoScale

Type: (String) - default: yes

This can be yes or no when the displayType is responsive. If set to yes the height will always be proportional to the width, if set to no the height will be fixed based on the maxHeight property.

backgroundColor

Type: (String) - default: #000000

The main background color of the canvas.

showGUI

Type: (String) - default: no

This can be yes or no, show the live debug settings GUI used in the demo.

showRocket

Type: (String) - default: yes

This can be yes or no, show or hide the rocket in the scene.

rocketPosition

Type: (Object) - default: {tx: -3.685, ty: -0.055, tz: 0, rx: -0.012, ry: -0.38, rz: -0.017, sx: 0.142, sy: 0.142, sz: 0.142}

The rocket transform object. tx, ty, tz = translation; rx, ry, rz = rotation (radians); sx, sy, sz = scale along each axis.

rocketSpinSpeed

Type: (Number) - default: 0.12

The rocket spin speed around its own axis.

animateRoket

Type: (String) - default: yes

This can be yes or no, enable the take-off / flight animation for the rocket.

rocketFlySpeed

Type: (Number) - default: 0.7

The rocket flying speed when animateRoket is enabled.

rocketExitOvershoot

Type: (Number) - default: 1.1

How far the rocket overshoots outside the view when it exits the scene, before it is reset.

rocketVelocityMagnitude

Type: (Number) - default: 5

The velocity magnitude used for the rocket thrust and particle direction.

rocketParticleSize

Type: (Number) - default: 0.12

The size of the rocket exhaust particles.

roketParticlesOffsetY

Type: (Number) - default: -0.85

The vertical offset of the rocket particle emitter. Use this to align the exhaust with the rocket engine.

rocketLaunchIntervalMinSec

Type: (Number) - default: 5

The minimum interval in seconds between rocket launches.

rocketLaunchIntervalMaxSec

Type: (Number) - default: 11

The maximum interval in seconds between rocket launches.

showSun

Type: (String) - default: no

This can be yes or no, show or hide the Sun sphere (and its glow, rays, flares).

sunSpinSpeed

Type: (Number) - default: 0.03

The Sun rotation speed around its own axis.

sunPosition

Type: (Object) - default: { tx: -0.109, ty: 0.099, tz: -190, rx: 0, ry: 0, rz: 0, sx: 1.565, sy: 1.565, sz: 1.565 }

Sun transform object. tx/ty/tz translation, rx/ry/rz rotation (radians), sx/sy/sz scale.

sphereFresnelPower

Type: (Number) - default: 1.0

Controls the fresnel highlight power on the Sun surface shader.

sphereFresnelInfluence

Type: (Number) - default: 1.2

Mix factor for fresnel contribution relative to the base color/texture.

sphereTint

Type: (Number) - default: 0.2

Tint strength applied to the Sun sphere (0 = none, higher = stronger).

sphereBase

Type: (Number) - default: 4.0

Base brightness multiplier used before other lighting adjustments.

sphereBrightnessOffset

Type: (Number) - default: 1.0

Additional brightness offset added after base calculations.

sphereBrightness

Type: (Number) - default: 0.6

Final overall brightness factor of the Sun sphere.

sphereLockCenter

Type: (Boolean) - default: true

If true the Sun sphere is locked to scene center (not offset by parallax translation).

sphereVisibility

Type: (Number) - default: 1.0

Sphere visibility alpha (1 = fully visible, 0 = hidden).

sphereDirection

Type: (Number) - default: 1

Spin direction, usually 1 or -1 to invert rotation.

glowRadius

Type: (Number) - default: 0.4

Outer radius of the Sun glow halo.

glowTint

Type: (Number) - default: 0.4

Tint strength applied to the glow color.

glowBrightness

Type: (Number) - default: 1.06

Brightness multiplier for the glow layer.

glowFalloffColor

Type: (Number) - default: 0.5

Controls hue/falloff transition of glow edges.

glowVisibility

Type: (Number) - default: 1.0

Glow visibility alpha (1 = visible, 0 = hidden).

glowDirection

Type: (Number) - default: 1

Glow animation direction (if animated), 1 or -1.

raysWidth

Type: (Number) - default: 0.08

Base width of individual solar rays.

raysLength

Type: (Number) - default: 0.14

Length/extent of the solar rays from the Sun surface.

raysOpacity

Type: (Number) - default: 0.05

Opacity of the solar rays layer.

raysNoiseFrequency

Type: (Number) - default: 8.0

Noise frequency used to modulate ray distortion.

raysNoiseAmplitude

Type: (Number) - default: 0.4

Strength (amplitude) of the ray noise distortion.

raysAlphaBlended

Type: (Number) - default: 0.3

Alpha blend factor for combining rays with glow.

raysHueSpread

Type: (Number) - default: 0.2

Hue variation range applied across different rays.

raysHue

Type: (Number) - default: 0.2

Base hue value applied to the rays (combined with spread).

flaresWidth

Type: (Number) - default: 0.006

Base width of the solar flares layer.

flaresAmp

Type: (Number) - default: 1.02

Amplitude multiplier for flare distortion animation.

flaresOpacity

Type: (Number) - default: 0.2

Opacity of the solar flares layer.

flaresAlphaBlended

Type: (Number) - default: 0.65

Alpha blend factor when mixing flares with other Sun effects.

flaresHueSpread

Type: (Number) - default: 0.16

Hue variation range applied across different flare samples.

flaresHue

Type: (Number) - default: 0.0

Base hue for solar flares (combined with hue spread).

flaresNoiseFrequency

Type: (Number) - default: 4.0

Noise frequency used for flare shape deformation.

flaresNoiseAmplitude

Type: (Number) - default: 0.2

Strength (amplitude) of the flare noise distortion.

showNebulaPlane

Type: (String) - default: yes

This can be yes or no, show or hide the nebula background plane.

nebulaTintColor

Type: (String) - default: #ffffff

The tint color applied over the nebula base and cloud layers.

nebulaBaseColor

Type: (String) - default: #ffffff

The base color of the nebula texture before tint and saturation adjustments.

nebulaCloudColor

Type: (String) - default: #ffffff

Cloud / wisps color accent used to differentiate brighter nebula regions.

nebulaTintStrength

Type: (Number) - default: 0.0

How strongly nebulaTintColor is blended (0 = disabled, higher = stronger).

nebulaSaturation

Type: (Number) - default: 1.0

Overall saturation multiplier applied after tint (1 = original, 0 = grayscale).

showSaturn

Type: (String) - default: yes

This can be yes or no, show or hide Saturn (planet + rings).

saturnSpinSpeed

Type: (Number) - default: 0.4492

Saturn rotation speed around its own axis.

saturnPosition

Type: (Object) - default: { tx: -0.019, ty: 1.12, tz: -170, rx: 0.326, ry: -0.148, rz: -0.29, sx: 0.793, sy: 0.793, sz: 0.793 }

Saturn transform object. tx/ty/tz translation, rx/ry/rz rotation (radians), sx/sy/sz uniform scale.

saturnAtmosphereColor

Type: (String) - default: #ffdea7

Atmosphere / light scatter color tint applied to Saturn.

saturnTwilightColor

Type: (String) - default: #ffdea7

Twilight rim color on the planet night/day terminator.

saturnLightPhi

Type: (Number) - default: 1.134

Light source spherical coordinate (phi) affecting Saturn shading.

saturnLightTheta

Type: (Number) - default: 0.393

Light source spherical coordinate (theta) affecting Saturn shading.

saturnRingInner

Type: (Number) - default: 1.2

Inner radius of Saturn's ring system.

saturnRingOuter

Type: (Number) - default: 2.0

Outer radius of Saturn's ring system.

saturnRingOpacity

Type: (Number) - default: 0.8

Opacity/visibility of the ring mesh (1 = fully visible, 0 = hidden).

showJupiter

Type: (String) - default: yes

This can be yes or no, show or hide Jupiter.

jupiterSpinSpeed

Type: (Number) - default: 0.4822

Jupiter rotation speed around its own axis.

jupiterPosition

Type: (Object) - default: { ttx: 1.281, ty: 0.449, tz: -160, rx: 0, ry: -0.836, rz: 0, sx: 2.927, sy: 2.927, sz: 2.927 }

Jupiter transform object. ttx/ty/tz translation (note the intentional ttx typo preserved), rx/ry/rz rotation (radians), sx/sy/sz scale.

jupiterAtmosphereColor

Type: (String) - default: #ffdea7

Atmosphere / light scatter color tint applied to Jupiter.

jupiterTwilightColor

Type: (String) - default: #ffdea7

Twilight rim color on the planet night/day terminator.

jupiterLightPhi

Type: (Number) - default: 1.134

Light source spherical coordinate (phi) affecting Jupiter shading.

jupiterLightTheta

Type: (Number) - default: 0.393

Light source spherical coordinate (theta) affecting Jupiter shading.

showUranus

Type: (String) - default: yes

This can be yes or no, show or hide Uranus.

uranusSpinSpeed

Type: (Number) - default: -0.2774

Uranus rotation speed around its own axis (can be negative for opposite spin).

uranusPosition

Type: (Object) - default: { tx: 2.446, ty: -0.459, tz: -140, rx: 0, ry: 0, rz: 0, sx: 0.733, sy: 0.733, sz: 0.733 }

Uranus transform object. tx/ty/tz translation, rx/ry/rz rotation (radians), sx/sy/sz scale.

uranusAtmosphereColor

Type: (String) - default: #aaffff

Atmosphere / light scatter color tint applied to Uranus.

uranusTwilightColor

Type: (String) - default: #aaffff

Twilight rim color on the planet night/day terminator.

uranusLightPhi

Type: (Number) - default: -0.063

Light source spherical coordinate (phi) affecting Uranus shading.

uranusLightTheta

Type: (Number) - default: 0.393

Light source spherical coordinate (theta) affecting Uranus shading.

showNeptune

Type: (String) - default: yes

This can be yes or no, show or hide Neptune.

neptuneSpinSpeed

Type: (Number) - default: 0.2970

Neptune rotation speed around its own axis.

neptunePosition

Type: (Object) - default: { tx: 1.124, ty: -1.021, tz: -120, rx: -3.142, ry: 0.255, rz: -3.142, sx: 0.564, sy: 0.564, sz: 0.564 }

Neptune transform object. tx/ty/tz translation, rx/ry/rz rotation (radians), sx/sy/sz scale.

neptuneAtmosphereColor

Type: (String) - default: #6666ff

Atmosphere / light scatter color tint applied to Neptune.

neptuneTwilightColor

Type: (String) - default: #6666ff

Twilight rim color on the planet night/day terminator.

neptuneLightPhi

Type: (Number) - default: 1.134

Light source spherical coordinate (phi) affecting Neptune shading.

neptuneLightTheta

Type: (Number) - default: 0.393

Light source spherical coordinate (theta) affecting Neptune shading.

showMercury

Type: (String) - default: no

This can be yes or no, show or hide Mercury.

mercurySpinSpeed

Type: (Number) - default: 0.003402

Mercury rotation speed around its own axis (very slow).

mercuryPosition

Type: (Object) - default: { tx: 0.211, ty: -0.47, tz: -40, rx: -3.141, ry: -1.519, rz: 3.141, sx: 0.256, sy: 0.256, sz: 0.256 }

Mercury transform object. tx/ty/tz translation, rx/ry/rz rotation (radians), sx/sy/sz scale.

mercuryAtmosphereColor

Type: (String) - default: #000000

Atmosphere / light scatter color tint applied to Mercury (often dark).

mercuryTwilightColor

Type: (String) - default: #ffffff

Twilight rim color on the planet night/day terminator.

mercuryLightPhi

Type: (Number) - default: 1.134

Light source spherical coordinate (phi) affecting Mercury shading.

mercuryLightTheta

Type: (Number) - default: 0.393

Light source spherical coordinate (theta) affecting Mercury shading.

showVenus

Type: (String) - default: no

This can be yes or no, show or hide Venus.

venusSpinSpeed

Type: (Number) - default: -0.000821

Venus rotation speed around its own axis (retrograde / negative).

venusPosition

Type: (Object) - default: { tx: -0.403, ty: -0.922, tz: -80, rx: 3.141, ry: 1.219, rz: -3.141, sx: 0.459, sy: 0.459, sz: 0.459 }

Venus transform object. tx/ty/tz translation, rx/ry/rz rotation (radians), sx/sy/sz scale.

venusAtmosphereColor

Type: (String) - default: #ffdea7

Atmosphere / light scatter color tint applied to Venus.

venusTwilightColor

Type: (String) - default: #ffdea7

Twilight rim color on the planet night/day terminator.

venusLightPhi

Type: (Number) - default: 1.134

Light source spherical coordinate (phi) affecting Venus shading.

venusLightTheta

Type: (Number) - default: 0.393

Light source spherical coordinate (theta) affecting Venus shading.

showEarth

Type: (String) - default: no

This can be yes or no, show or hide Earth.

earthSpinSpeed

Type: (Number) - default: 0.02

Earth rotation speed around its own axis.

earthCloudsSpread

Type: (Number) - default: 0.9

Cloud layer spread factor (1 = original placement, lower = tighter; higher = wider drift).

earthPosition

Type: (Object) - default: { tx: -0.03, ty: 0.034, tz: -60, rx: 0, ry: -0.818, rz: -0.001, sx: 1.688, sy: 1.688, sz: 1.688 }

Earth transform object. tx/ty/tz translation, rx/ry/rz rotation (radians), sx/sy/sz scale.

earthAtmosphereColor

Type: (String) - default: #00aaff

Atmosphere / light scatter color tint applied to Earth.

earthTwilightColor

Type: (String) - default: #ff6600

Twilight rim color on the planet night/day terminator.

earthLightPhi

Type: (Number) - default: 2.844

Light source spherical coordinate (phi) affecting Earth shading.

earthLightTheta

Type: (Number) - default: 0

Light source spherical coordinate (theta) affecting Earth shading.

showMoon

Type: (String) - default: no

This can be yes or no, show or hide the Moon.

moonSpinSpeed

Type: (Number) - default: 0.007304

Moon rotation speed around its own axis.

moonPosition

Type: (Object) - default: { tx: -0.015, ty: 1.47, tz: -40, rx: -3.14, ry: -1.546, rz: -3.142, sx: 0.668, sy: 0.668, sz: 0.668 }

Moon transform object. tx/ty/tz translation, rx/ry/rz rotation (radians), sx/sy/sz scale.

moonAtmosphereColor

Type: (String) - default: #000000

Atmosphere / light scatter color tint applied to the Moon (usually dark).

moonTwilightColor

Type: (String) - default: #ffffff

Twilight rim color on the Moon night/day terminator.

moonLightPhi

Type: (Number) - default: 1.134

Light source spherical coordinate (phi) affecting Moon shading.

moonLightTheta

Type: (Number) - default: 0.051

Light source spherical coordinate (theta) affecting Moon shading.

showMars

Type: (String) - default: no

This can be yes or no, show or hide Mars.

marsSpinSpeed

Type: (Number) - default: 0.1944

Mars rotation speed around its own axis.

marsPosition

Type: (Object) - default: { tx: 0.89, ty: 0.635, tz: -60, rx: 0, ry: -0.818, rz: -0.001, sx: 1.113, sy: 1.113, sz: 1.113 }

Mars transform object. tx/ty/tz translation, rx/ry/rz rotation (radians), sx/sy/sz scale.

marshAtmosphereColor

Type: (String) - default: #e0653b

Atmosphere / light scatter color tint applied to Mars (typo marshAtmosphereColor preserved).

marsTwilightColor

Type: (String) - default: #e0653b

Twilight rim color on the planet night/day terminator.

marshLightPhi

Type: (Number) - default: 0

Light source spherical coordinate (phi) affecting Mars shading (typo marshLightPhi preserved).

marshLightTheta

Type: (Number) - default: 0

Light source spherical coordinate (theta) affecting Mars shading (typo marshLightTheta preserved).

Methods

Methods are functions that can be called via the API to execute certain actions.

JavaScript methods look like fwdpp0.methodName( /* arguments */ ), please note that fwdpp0 is the Planet Pop instance name, if you are using multiplegrids don't forget to set the instance unique for each instance like this fwdpp1, fwdpp2, fwdpp3, etc... depending on how manygrids are added.

destroy

.destroy():Void

Destory the Planet Pop instance and remove it from DOM.

Events

Planet Pop - Embed Realistic Sun & Planets on Any Page has many events, they are added via the addEventListener method add accessed via the instance name.

The events must be registered when the API is ready.

// API.
let fwdppAPI = setInterval(() =>{
if(window['fwdpp0']){
	console.log('PP API ready')
	clearInterval(fwdppAPI);

	// Register the LIKE event.
	fwdpp0.addEventListener(FWDPP.TEXTURES_LOADED, onTexturesLoaded);
}
}, 100);


// Listen for the LIKE event.
function onTexturesLoaded(e){
	console.log(e)
}

FWDPP.TEXTURES_LOADED

Dispatched when all texures are loaded and scene is ready...

Notes

Planet Pop is a customizable Three.js and WebGL shader toolkit that lets you embed realistic suns, planets, Earth & Moon, nebula and animated rockets on any web page. Available as a JavaScript component and WordPress / WooCommerce plugin, it’s fully responsive, mobile-friendly and easy to integrate into any modern website.

For me this is more than a job, it is my passion, I love to create innovative tools that my clients can benefit from. @Tibi - FWD.

For support and customizations please write to me directly at this email.

JavaScript Documentation

Documentation for the JavaScript version, API and overall JavaScript implementation.

Getting Started

Installation

Modify code

Settings

Example

instance

displayType

parentId

texturesFolder

alllowSpin

allowScaleAndDrag

useTeleportTransition

paralax

initializeWhenVisible

paralaxAmount

scaleOnScroll

initialScale

scrollScaleAnchor

maxWidth

maxHeight

autoScaleStartWidth

autoScale

backgroundColor

showGUI

showRocket

rocketPosition

rocketSpinSpeed

animateRoket

rocketFlySpeed

rocketExitOvershoot

rocketVelocityMagnitude

rocketParticleSize

roketParticlesOffsetY

rocketLaunchIntervalMinSec

rocketLaunchIntervalMaxSec

showSun

sunSpinSpeed

sunPosition

sphereFresnelPower

sphereFresnelInfluence

sphereTint

sphereBase

sphereBrightnessOffset

sphereBrightness

sphereLockCenter

sphereVisibility

sphereDirection

glowRadius

glowTint

glowBrightness

glowFalloffColor

glowVisibility

glowDirection

raysWidth

raysLength

raysOpacity

raysNoiseFrequency

raysNoiseAmplitude

raysAlphaBlended

raysHueSpread

raysHue

flaresWidth

flaresAmp

flaresOpacity

flaresAlphaBlended

flaresHueSpread

flaresHue

flaresNoiseFrequency

flaresNoiseAmplitude

showNebulaPlane

nebulaTintColor

nebulaBaseColor

nebulaCloudColor

nebulaTintStrength

nebulaSaturation

showSaturn

saturnSpinSpeed

saturnPosition