JavaScript Documentation

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

Getting Started

Pop Solar System - realistic solar system simulation is a powerful, responsive and highly customizable 3D scene that lets you place a realistic 3D solar system simulation in you page.

Only one instance can be used in the same 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.

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

Installation

Choose the preset-1.html in thebuild 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 Pop Solar System CSS file and JavaScript in the header:

<head>

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

</head>

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

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

	function fwdSetupPSS(){

		new FWDPSS({
			
			instance: 'fwdpss0',
			parentId: "myDiv",
			displayType: 'responsive',
			contentPath: './content/',
			jsonPath: './content/resources/planets.json',
			jsonObj: null,
			paralax: true,
			lensFlareEffect: true,
			maxWidth: 1920,
			maxHeight: 900,
			autoScaleStartWidth: 1200,
			autoScale: true,

			// Preloader
			preloaderBackgroundColor: 'rgba(0, 0, 0, 1)',
			preloaderTextColor: '#FFFFFF',
			preloaderCircleNormalColor: '#333333',
			preloaderCircleSelectedColor: '#ffffff',

			// Simulation speed settings
			simulationDaysPerSecond: 0.1,
			minSimDaysPerSecond: 0.0,
			maxSimDaysPerSecond: 40,

			// Buttons
			buttons: 'content, zoomout, zoomin, clock, mouse, share, print, fullscreen',
			buttonsTooltips: 'Show table of content/Hide table of content, Zoom Out, Zoom In, Years Per Second, Enable Mouse Wheel/Disable Mouse Wheel, Share, Print, Full Screen/Normal Screen',
			controllerBackgroundColor: 'rgba(0, 0, 0, 0.8)',
			buttonsNormalColor: '#888888',
			buttonsSelectedColor: '#f1ac00',
			tooltipBackgroundColor: '#ffffff',
			tooltipTextColor: '#000000',

			// Circular slider
			circularSliderBackgroundColor: '#888888',
			circularSliderHandleNormalColor: '#ffffff',
			circularSliderHandleSelectedColor: '#ffffff',

			// Table of contents
			tableOfContentText: 'Celestials',
			tableOfContentTextColor: '#FFFFFF',
			tableOfContentWidth: 300,
			tableOfContentTextNormalColor: '#888888',
			tableOfContentTextSelectedColor: '#f1ac00',
			tableOfContentBackgroundColor: 'rgba(0, 0, 0, 0.8)',

			// Info window
			showInfoWindow: true,
			infoWindowTextColor: '#ffffff',
			infoWindowWidth: 400,
			infoWindowNormalColor: '#888888',
			infoWindowSelectedColor: '#f1ac00',
			infoWindowBackgroundColor: 'rgba(0, 0, 0, 0.8)'

		});

	}
        
</script>

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

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

To add multiple Pop Solar Systemers 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 Pop Solar System configuration options.

Modify code

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

Settings

Pop Solar System - realistic solar system simulation has many options that allows to customize it's features. They are added directly in the Pop Solar System constructor as it can be seen in the installation section.

Example

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

	function fwdSetupPSS(){
		new FWDPSS({ 

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

instance

Type: (String) - default: unset

The Pop Solar System 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 Pop Solar System 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 Pop Solar System holder/div ID, please make sure that this has an unique ID, it can be added anywhere in your page.

contentPath

Type: (String) - default: ./content/

Base path to static assets (CSS, images, textures) used by Pop Solar System. Must be accessible from the page.

allowScaleAndDrag

Type: (Boolean) - default: true

Enable interactive scaling and drag on the scene container. Set to false to lock user scaling/dragging.

jsonPath

Type: (String) - default: unset

Path to the planets configuration JSON file. Pop Solar System loads orbital and visual parameters from this file.

jsonObj

Type: (Object|null) - default: null

Inline JSON object for configuration. If provided, it overrides jsonPath and uses the object directly.

lensFlareEffect

Type: (Boolean) - default: true

Toggle the lens flare shader around the Sun for added visual depth. Disable for a cleaner look or performance.

maxWidth

Type: (Number) - default: 1920

Maximum width of the canvas area in pixels when displayType is responsive.

maxHeight

Type: (Number) - default: 900

Maximum height of the canvas area in pixels when displayType is responsive.

autoScaleStartWidth

Type: (Number) - default: 1200

Viewport width threshold in pixels after which automatic scaling is applied to keep content readable.

autoScale

Type: (Boolean|String) - default: true

Enable automatic scaling of the scene on smaller screens. Accepts boolean or 'yes'/'no' in presets.

simulationDaysPerSecond

Type: (Number) - default: 0.1

Base simulation speed: how many Earth days advance per real-time second.

minSimDaysPerSecond

Type: (Number) - default: 0.0

Minimum allowed simulation speed. Prevents negative or too-small motion during user adjustments.

maxSimDaysPerSecond

Type: (Number) - default: 40

Maximum allowed simulation speed to keep motion readable and performance stable.

buttons

Type: (String) - default: content, zoomout, zoomin, clock, mouse, share, print, fullscreen

Comma-separated list of controller buttons to display. Order determines visual placement.

buttonsTooltips

Type: (String) - default: preset tooltips

Comma-separated tooltips matching the buttons order to guide users.

controllerBackgroundColor

Type: (String) - default: rgba(0,0,0,0.8)

Background color of the controller panel.

buttonsSelectedColor

Type: (String) - default: #f1ac00

Accent color applied to active/selected controller buttons.

tooltipBackgroundColor

Type: (String) - default: #ffffff

Background color of controller tooltips.

tooltipTextColor

Type: (String) - default: #000000

Text color used inside controller tooltips.

circularSliderBackgroundColor

Type: (String) - default: #888888

Background color of the circular preloader slider track.

circularSliderHandleNormalColor

Type: (String) - default: #ffffff

Handle color of the circular preloader slider in normal state.

circularSliderHandleSelectedColor

Type: (String) - default: #ffffff

Handle color of the circular preloader slider when selected/dragging.

tableOfContentText

Type: (String) - default: Celestials

Header label shown at the top of the table of contents panel.

tableOfContentTextColor

Type: (String) - default: #FFFFFF

Color of the table of contents header label.

tableOfContentWidth

Type: (Number) - default: 300

Width of the table of contents panel in pixels.

tableOfContentTextNormalColor

Type: (String) - default: #888888

Color of non-selected items listed in the table of contents.

tableOfContentTextSelectedColor

Type: (String) - default: #f1ac00

Color of the selected/active item in the table of contents.

tableOfContentBackgroundColor

Type: (String) - default: rgba(0,0,0,0.8)

Background color of the table of contents panel.

showInfoWindow

Type: (Boolean) - default: true

Show or hide the info window panel that displays details for the selected celestial.

infoWindowTextColor

Type: (String) - default: #ffffff

Text color used in the info window panel.

infoWindowWidth

Type: (Number) - default: 400

Width of the info window panel in pixels.

infoWindowNormalColor

Type: (String) - default: #888888

Color for non-selected items or controls inside the info window.

infoWindowSelectedColor

Type: (String) - default: #f1ac00

Accent color for selected/active elements inside the info window.

infoWindowBackgroundColor

Type: (String) - default: rgba(0,0,0,0.8)

Background color of the info window panel.

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 Pop Solar System instance name, if you are using multiplegrids don't forget to set the instance unique.

destroy

.destroy():Void

Destory the Pop Solar System instance and remove it from DOM.

Notes

Pop Solar System 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.

© Copyright FWDesign