Quick Start Guide

Invoking the Viewer

Select Viewer from the WordPress Admin Menu.

Start Creating a New Scene

A list of all your current scenes will be displayed.

Select Add New Scene from the ‘list all scenes page toolbar’.

An empty Scene Viewer

An empty Scene Viewer will be displayed.

The image to the right shows the main areas of the viewer.

Loading a Template

You need to load a template to modify.

Select Templates from the menu Templates.

Select the simplest template

Select 3D Text from Back To Front.json which is the simplest template

A Scene Viewer With the default 3D Text is displayed

A Scene Viewer with the template loaded is displayed. This template displays a 3D Text String and has an animation which moves the text from the back to the front of the scene over 10 seconds.

The image to the right shows the background colour has been set to black and shows ‘Hello World!’. There is also a Directional Light in the scene.

The Scenegraph

The Scenegraph shows that the 3D Text has 2 objects, a Group named Pivot which allows you to move and rotate the text about its midpoint and the actual 3D Text named HelloWorld!

Modifying the 3D Text

Select the 3D Text itself in the Scenegraph named Hello World!.

Select GEOMETRY from the properties TABs.

You can change the text by typing your new text into the Text textarea.

Changing the 3D Text Font

Select the new font from the dropdown.

Changing the Material

Make sure that the actual text is selected in the Scenegraph then select the MATERIAL TAB.

You can change the material from a solid colour to an image or to a texture.

There are two materials applied to 3D Text:

  • One for the front and rear faces (Slot 1)
  • One for the extrusion (Slot 2)

Text material Colour Changed

The colour of the faces has been changed to yellow.

Changing the Background

Select the PROJECT TAB from the side bar.

Changing the Background

and scroll down until you get to the Background Section.

You can change the background to one of the following:

  • A solid colour
  • An image
  • A shader
  • A checkered background
  • A gradient
  • A skybox

A Gradient Background

The image to the right shows the background changed to a gradient.

Changing the Animation

The default animation for this template is to move the text from the back to the front of the scene over 10 seconds.

You can remove or change the animation by removing the current one and adding a new one from the dropdown.

Animations

The animation macros perform as follows:

  • back to front pp.ani – moves the object from the back to the front and to the back
  • back to front sway.ani – moves the object from the back to the front with a swaying action
  • back to front.ani – moves the object from the back to the front
  • rotatex.ani – rotates the object on the X axis
  • rotatey.ani – rotates the object on the Y axis
  • rotatez.ani – rotates the object on the Z axis
  • world rotate.ani – rotates the object in a circle about the Y axis
  • world rotate 2.ani – rotates the object in a circle about the Y axis

Playing the Animation

You can see what the animation macro will do by selecting Play from the Menu Bar

Saving the Scene

You can now save your scene by typing a name into the Scene Name field below the viewer and then clicking Save Changes.

The position of the camera used for the display of the scene on the web page is the current Camera position when you click Save Changes

List of Current Scenes

The saved scene is displayed in the list of your current scenes.

You should note the scene’s ID if you intend to add a shortcode manually to your web page.
In this case the shortcode would be, in square brackets:

xtradscene id=”6046″

Adding a Scene to a Page using the Standard Editor

You can add a scene to page by using the standard editor.

9) Select XTRA from the editor’s toolbar.

Selecting the Scene from the Standard Editor Popup

A popup dialog is displayed.

Select the name of your scene from the popup’s dropdown list.

You can ignore the setting for initial image. When a page first loads containing a Scene an initial image is displayed while loading the actual 3D Scene.
By default, the still image captured when the scene is saved in the editor, is used. The initial image field allows you to choose an alternative image.

You can leave all the fields set with their default values.

Scene Added to Page

A shortcode has been added to the page.

Adding a Scene to a Page using the WPBakery Page Editor

You can add a scene to page by using the WPBakery Page Editor if you use it.

Select Xtrad Scene from the editor’s toolbar.

Selecting the Scene from the WPBakery Popup

A popup dialog is displayed.

Select Hello World (or the name of your scene) from the popup’s dropdown list and click on Save Changes.

You can ignore the setting for initial image. When a page first loads containing a Scene an initial image is displayed while loading the actual 3D Scene.
By default, the still image captured when the scene is saved in the editor, is used. The initial image field allows you to choose an alternative image.

You can leave all the fields set with their default values.