Getting Started

Planet Pop - Embed Realistic Sun & Planets on Any Page, a powerful, responsive, and extremely customizable, versatile Planet Pop with image(.jpg, jpeg, .png, .webp), seamlessly running on all major browsers and mobile devices, including iPhone, iPad, iOS, Android, MAC, and Windows, elevating your website's audio experience to a whole new level.

It is built using EcmaScript6 using the latest JavaScript and CSS standards. The 3D sphere and particles use Three.js and WebGL shaders running exclusively on the device's GPU.

Please note that the mettrix are units so visual aproximation is needed, since the Planet Pop runs in 3D space and various aspects like camera position or camera rotation, using pixels is not possible.

Installation

After purchasing the plugin, inside the main zip file you will find installable plugin fwdpp.zip.

Installation steps

1. In your WordPress & WooCommerce Admin Dashboard, go to Plugins > Add New.
2. Upload the fwdpp.zip plugin file that you downloaded.
3. Click on install now.
4. If successful, click Activate Plugin to activate it, or Return to Plugin Installer.

Update

Uninstall and delete the current installed version, doing this will not remove any of the settings, install the new version by following the steps from the installation section above, and if you are using a cache plugin clear the browser cache with it to make sure the old files are not used.

Usage

Using the plugin is stright forward, just add a new planet in the plugin settings and configure it as needed. Here is video tutorial explaining in depth the usage.

Shortcode

After the preset and gallery are done use the shortcode generator to add the Planet Pop in your page, post or custom post.

WooCommerce

Please look into the WordPress & WooCommerce section to understand how to configure the Planet Pop.

Grab the shortcode and add it in the product description.

API - Application Programming Interface

This section is for developers that want to use the plugin API. The following lists represent all the public API methods and event listeners that can be used from the Planet Pop externally.

You can access the Planet Pop instances by their order in the page with the fwdpp name with its order after it, starting from 0. For example if you have 2 instances their names are fwdpp0 and fwdpp1. Here is an example how to use the API in the WordPress & WooCommerce editor or in a code section of your page:

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

	// Register the LIKE event.
	fwdpp0.addEventListener(FWDPP.READY, onReady);
}
}, 100);


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

<!-- Add a button -->
<button onclick="destroy()">Destory</button>

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 multiple Planet Pops don't forget to set the instance unique for each instance like this fwdpp1, fwdpp2, fwdpp3, etc... depending on how many Planet Pops 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.

FWDPP.READY

Dispatched when the a Planet Pop instance 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.

WordPress & WooCommerce Documentation

Documentation for the WordPress & WooCommerce version, API and overall implementation.