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:
name the html and js (javascript) like the model
upload html and js to /media/personalization/3d_models
upload .bablyon (model) and all textures to /media/personalization/3d_models/assets
open the HTML file and replace modelName in <script src="modelName .js"></script> with model name
open JS file and replace modelName in BABYLON.SceneLoader.Load("assets/", "modelName.babylon", this.engine, function(scene) { with model name
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: