Antares v1.0 (A.A.A)

3D pages builder and 3D slideshow for WordPress #

Product Information #

Application Name: Anaters
Description: 3D slideshow and 3D page builder
Project URI:
Author: Amin Shahrokhi
Author Email: support [at]
Author URI:
Creation Date: December 2020
Copyright: © 2020 Amin Shahrokhi. All Rights Reserved.

Overview #

Antares is a web application that gives you the ability to create 3D slideshows, 3D pages, and even full 3D websites without coding. All you need to know is learning how to fill some forms with accurate values and then you will have a shortcode to use the output anywhere on your website. Antares is created user friendly and easy to work with for all types of users. But, if you are already familiar with codes, you will have the opportunity to use the full potential of Antares. This guide helps you understand the logic behind this application and learn how to work with it in the best way in order to produce the best possible outcome.

Features: #

  • Able to create a 3D slideshow, 3D page, and full 3D websites without coding.
  • Unlimited scenes, slides, objects, and particles.
  • Support all types of web elements such as HTML, text, video, audio, etc.
  • User-friendly and fully responsive administration panel.
  • CSS and JavaScript support for customization and applying to objects.
  • Tween.js support with over 30 transition effects.
  • Preset particles available.
  • Custom modeling easily possible using the “Custom Particle” feature.
  • Shortcode generator for use in WordPress content.
  • Full control over the scene, camera, objects, and every movement on the scene.
  • Multi-slide features are available to have more than one scene in a show.
  • Customizable navigation that acts as both slideshow nav buttons and page menu.
  • Fully responsive and cross-browser compatible output.
  • Independent database tables and sample data on installation.

For you to know: #

Bypass URL:

When you create a slideshow with Antares, the plugin creates a URL to access it via a web browser. Of course, that is not the regular way to see the preview of the slideshow, as the slideshow page provides a preview link to check the output on the admin area. But, if you are developing a scene that needs you to see the slideshow on the frontend before you use the shortcode to make it available on a page, then the address you need to call is:


Sample data on installation:

Antares creates a demo slideshow on installation. This demo slideshow has two slides and each slide has its own objects and particle. Reviewing the settings of this slideshow gives you a clear example of maintaining the values on the admin forms. User the preview button the slideshow page and see the output. Then go inside every slide, object, and particle to see how the arrangement of these form values affects the output. Feel free to check the values of each part by clicking on the edit button beside its name in the list.

Pause on blur:

Antares uses WebGL to render the scene, camera, and all objects included. Usually, this performance requires the machine to work harder. So, being mindful of that the idea came to the front for pausing the animations and decreasing the resource usage when the page is not in focus. Now, if you are watching an Antares scene on the web and change the application or even the browser window, the scene with stop the animation and put everything on hold to avoid unnecessary calculations.

Installation #

To make the product work, simply extract the plugin zip file and upload it in on your WordPress folder in the path: [ROOT] > wp-content > plugins.
The other way to install the plugin is logging into the WordPress admin panel and going to the path: WordPress > Plugins > Add New:

Antares installation

Then at the top of the page, click the ”Upload Plugin” button:

Installing Antares on WordPress

On the last page, browse your computer, select the plugin file, and hit the ”Install Now” button.
Make it use

In order to use the plugin, it must be activated first. Follow the steps below to activate and use the plugin:

Go to Plugins > Installed Plugins.
Click the “Activate” link under the plugin name.
Click on the Antares menu that now is visible on the WordPress sidebar menu.

Uninstallation #

To uninstall the plugin you can simply delete the whole plugin folder from the directory: [ROOT] > wp-content > plugins.
The other way to uninstall a plugin goes following:

Go to Plugins > Installed Plugins.
Click the “Deactivate” link under the plugin name.
Click the “Delete” link under the plugin name.

There is one more thing to say about uninstallation. When you activate Antares, an option will be created and turned on by default. This option is responsible for keeping your data on your database when Antares is uninstalled. You can leave this option on, or turn it off at any time. The only you need to do is going to the Antares main screen, clicking on the “Options” button at the top right, set the “Keep data on uninstallation” as needed and pressing the “Update” button next to the mentioned option.

Keep Antares database on uninstallation
Keep Antares database on uninstallation

If this option is turned on, as it is by default, the data you put into the Antares database tables will remain untouched even after you uninstall the plugin. If you turn it off, all options and database tables will be removed while you uninstall the plugin.

Customization #

Antares makes HTML, CSS, and JavaScript available when you want to create an object. In other words, you can apply all of your codes to the objects that you are using in the scene. For example, you can import an image, style it with CSS, and add a JavaScript function to it. This is a key feature in the development process that overcomes all of the necessities in case of customization. But, if your project really requires you to go further and make changes in the core program, then you are good to go with editing the files below:

Frontend CSS:
[WP ROOT]/wp-content/plugins/antares/public/css/antares-public.css

Frontend jQuery:
[WP ROOT]/wp-content/plugins/antares/public/js/antares-public.js

The main Three.js file:
[WP ROOT]/wp-content/plugins/antares/public/js/master.js

Backend CSS:
[WP ROOT]/wp-content/plugins/antares/admin/css/antares-admin.css

Backend jQuery:
[WP ROOT]/wp-content/plugins/antares/admin/js/antares-admin.js

In the next articles of this guideline, we will dig deeper to find out more about Antares administration panel and the way we use it to create our pages, how our dreams go.

Credits #

Special thanks to those who gave this project a chance to come to fruition.

  • HTML5
  • CSS
  • Scss
  • Semantic UI
  • JavaScript
  • jQuery
  • JSON
  • Three.js
  • Tween.js
  • PHP
  • MySQL
  • WordPress
  • Gimp
  • Inkscape
  • Blender
  • Audacity

Thank you for using Antares.