Skip to main content
Skip table of contents

X3 Creation of static 3D models (X3 EN)

3D Model Setup

This documentation will focus on implementing 3D models into PrintQ. The examples given are from 3ds Max, but they apply to all 3D software.

(Optional) Importing from Esko

If you wish to use models from Esko, you will need to export as Collada (.dae). This file format can be imported in Blender and 3ds Max and can be worked with.

Camera

A target camera should be added for all models. Babylon will then take that camera and convert it into its own type of target-camera (called an ArcRotateCamera). The starting position and distance from object will mirror the one from 3ds Max.

Scale

The aforementioned camera has a max and min radius setting. This allows the user to zoom in and out only until that limit is hit. If we want all models to be consistent, then we need to scale the models in the 3D software.

Materials

This is an important step. Materials are what helps us connect the pdf to the 3d model. What we want is to have one material for each PDF page. You can also use two materials on the same mesh (Multi mat). Babylon will recognize this and convert it properly.

Most material properties (such as specular power) will export to Babylon. So you can freely play with them if you want to go for another look.

The Chapter “Finding the Texture“ explains how to find the texture for the personalization template. Only default materials will work, so no Renderman, Vray, Mental Ray, etc.

UV Mapping

All materials that will attach to the PDF need to have their UVs mapped. The way to map is each section that needs mapping should fit the section of its respective page. Important: you should always use the final PDF that will be used in the Personalization Template. If the PDF will need to be changed in the future, the model will need a UV Map update as well.

Animations

Babylon can't run animations backwards so they will need to be added if we want them. Also, there is no need to have breaks between steps (30 frames where nothing happens) unless it's part of a step. For example, if our animation has 3 steps, 30 frames each, we can animate like this:

  • step 1, frames 0-30 – start

  • step 2, frames 30-60

  • step 3, frames 60-90 – end

  • step 4, frames 90-120

  • step 5, frames 120-150

  • step 6, frames 150-180 – start

Step 1 = step 6, 2 = 5, 3 = 4. The same, but reversed.

We recommend animating at 30 fps because it's what babylon runs at.

Z-clipping

This happens when two meshes overlap and fight for the same space. It happens quite a lot and there's no automatic fix. Even if in 3ds Max it looks good (render or not), Babylon creates its own scene with entirely different elements similar to what we export from 3ds Max. If you encounter this, I found it best to just move the meshes more apart.

Lights

We add these through code to maintain the same lighting conditions. However, we can disable this and let you take control over lights. Only default lights will work, so no Renderman, Vray, Mental Ray, etc.

Exporting the model

You should install the Babylon extension for your 3D application of choice from here:

This will allow you to export a .babylon file that will be loaded on the website.

File structure and configuration

Attached, you will find a default file structure that will be used for all models. This contains the html and javascript files that will attach the model to the system. These are the steps that need to be followed:

  1. name the html and js (javascript) like the model

  2. upload html and js to /media/personalization/3d_models

  3. upload .bablyon (model) and all textures to /media/personalization/3d_models/assets

  4. open the HTML file and replace modelName in <script src="modelName .js"></script> with model name

  5. open JS file and replace modelName in BABYLON.SceneLoader.Load("assets/", "modelName.babylon", this.engine, function(scene) { with model name

  6. you can view the model by accessing the following link systemUrl/media/personalization/3d_models/modelName.html

Finding the Texture

We have a functionality that finds the texture for each PDF page. As previously mentioned in “Animations“, we must have one material for each PDF page. Knowing our material names, we can run this command in our browsers' Developer Tools (in Chrome, right click the model → Inspect → Console tab):

getTexture (“textureName”)

where textureName should be replaced with the material name given in the 3D Software.
Files:

3D_Template_Files_2021 2.zip

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.