
for SPX
Version 1.0
3D Layer for SPX


Features
3D Layer for SPX is a ThreeJS implementation for SPX Templates. The version 1.0 supports there features:
- .glb file format with multiple Objects and Animations.
- Armatured/Rigged Characters and Animations.
- HDR Environment map.
- Transparent Background (works with HDR also).
- Custom Scene Parameters:
- Pause Points
- Custom Object Parameters
- Auto Rotate Objects
- PBR Materials.
Before start using the 3D Layer Template, user should know how to use SPX GC and templates in general.
Start here: https://www.spx.graphics/getting-started-with-spx-gc
Installation

Installing 3D Layer template, the process is the same as all SPX Templates and it should be placed in the SPX-GC’s ASSETS folder. It is recommended to use the following hierarchy:
ASSETS
┕━⏷ templates
┝━⏵ Developer-1
┝━⏵ Developer-2
┕━⏷ Developer-3
┝━⏵ PackName-1
┕━⏷ PackName-2
┝━⏵ css
┝━⏵ js
┝━⏵ img
┝━⏵ models
┝━⏵ hdr
┝━ Template1.html
┕━ Template2.html
Using the above principle, unzip the template package to /ASSETS/templates/meniac/3DLayer
Usage

Add template to a project
- Go into SPX-GC application
- Open (or create) a project
- Go to
Project Settings
- Browse available templates with
[+]
button - Pick a template and click
SELECT
- In project settings you can change some settings, such as server and layer to be used for playout, accent color etc. Typically these settings does not need to be changed.
SPX 3D Layer Template

When template is played, it will start to play all animations that the glTF file contains, in full screen mode.
Parameter | Desc |
---|---|
Gfc operator note | Can be used to give text hint for graphics operator. Helps to find template on Rundown. |
Loop Style | Four Different Looping options:
|
glTF -file | List of glTF files that are located in the /models/ folder. |
HDRI Selector | List of HDR files that are located in the /hdr/ folder. |
Shadow Plane | Creates a transparent plane in world origin that receives only shadows. Very helpful for example, if it is needed to catch shadows from objects in virtual environment. |
Time Display | Display time in seconds in right top corner. Mostly used for Debug and Development use. |
Blender

3D Layer for SPX is designed to use Blender as 3D tool of Choise and has been tested with LTS version 3.3.14. The glTF file export probably works with other 3D Softwares also, but this HAVE NOT BEEN TESTED and we cannot quarantee that all features work.
Before Exporting 3D scene as .glb file, the ‘File / External Data / Automatically Pack Resources’ Should be turned on.
When the models and animations are ready to be Exported, select ‘File / Export / glTF 2.0 (.glb/gltf)’ from Blenders menu.


Here is good settings for basic export:
Setting | Desc |
---|---|
.glb | The template uses glTF binary format. So make sure to select it. |
Remember Export Settings | This saves the setting in blender file, so next time you don’t have to set them again. |
Include | Data to include:
|
Light Mode | Three option available:
|
Animations | Bake all animations should always be on. Leave no animations behind! |

Custom Properties
Custom Properties will be shows on glTF loading as "userData"
and is in JSON format.
The Custom Property name should always be: SPX3D

For Scene
Parameter | Value |
---|---|
PausePoint | Seconds is comma separated integers as string. { “PausePoint” : “2, 4, 6” } This Example sets 3 different pause points at times: 2, 4 and 6 seconds. |
… | … |

For Objects
Parameter | Value |
---|---|
AutoRotateX | Rotates Object automatically on X-axis. Given value is Degrees per Frame Draw. { “AutoRotateX” : “2” } |
AutoRotateY | Rotates Object automatically on Y-axis. Given value is Degrees per Frame Draw. { “AutoRotateY” : “2” } |
AutoRotateZ | Rotates Object automatically on Z-axis. Given value is Degrees per Frame Draw. { “AutoRotateZ” : “2” } |
Properties can be combined in one property:
{ “AutoRotateX” : “5”, “AutoRotateY” : “10” }
This example automatically rotates object 5 degrees on X-axis and 10 degrees on Y-axis.

Custom Property Editor

Known Issues

- The Animation length is taken from the OBJECTS animation timeline and keyframes. It has nothing to do with 3D softwares timeline length! For example, if Blenders timeline is set to be 10 seconds and the last keyframe is at time 8 seconds, the exported scene in template will be 8 seconds long. You need to add “empty” keyframe at time 10 seconds, to make it 10 seconds long.
- Just a reminder that, the first Camera that is found in glTF will be used. It’s good practice to only one camera in the file.
Good to know
- 3D Layer for SPX is developerd by MENiAC Oy
- Contact MENiAC via email
- SPX GC: https://spx.graphics
- Blender: https://blender.org
- ThreeJS: https://threejs.org
- glTF File Format: https://en.wikipedia.org/wiki/GlTF
©2024 – MENiAC Oy
