Export FBX Models

1. FBX Support

To support 3D content in genARate Studio Three.js is used. For import of fbx files into genARate Studio we use the available Three.js loader.

While fbx is a common format used for data exchange it is neither an open nor a standardized format. FBX is a closed Autodesk format and constantly changing.

To ensure that 3D content is imported and shown correctly there are several issues to bear in mind/several steps that need to be performed when exporting fbx from other software packages.

2. MS Paint 3D to Three.js

MS Paint 3D does not offer any options when exporting to .fbx so there are no settings that need to be taken care of.

Known restrictions:

  • It is not possible to import a file with several (more than one) meshes into genARate Studio
3. Maya to Three.js

For pre-visualizing a 3D object it is recommended to use the “Autodesk FBX review” for checking the exported asset and animations.

https://www.autodesk.com/products/fbx/fbx-review

The viewer supports more specifications than the fbx loader for Three.js but if there are already visible errors, they will also appear when importing into genARate Studio.

FBX Version Tested: FBX Binary 2012

Materials / Shaders

For exporting textures check EMBED MEDIA in the plugin settings.

At the current status genARate Studio only supports fbx with embedded textures.

  • Three.js supports Lambert and Phong shaders.
  • Every mesh/object can only have one shader applied (polygon-selection doesn`t work)

-> divide object into separate meshes or distinguish in textures/UVs

  • When getting problems with multi-objects using the same texture (black objects), it`s recommended to use different shaders with different textures applied.

In general: if you get a black model or it doesn’t show up at all then the textures should be controlled first.

In case you are using more than one texture per object or the path of the texture is incorrect, problems can occur: try a lambert shader only with color and without textures; if the object is displayed correctly, the error is in the texture.

Emissive, Diffuse, Ambient, Specular

Textures are displayed in the emissive channel. The diffuse value can be changed to darken/brighten the object.

Also, the same texture as for the emissive channel can be used additionally in the diffuse channel, using the brightness of the texture itself.

Bump-Map

In general Bump-Maps do not work that well. Light-information is needed to make bumb visible, therefore the Phong material should be used with specular values. The bump-values from the 3d-software are not being translated, but must be adjusted by code or texture brightness/contrast.

Normal-Map (tangent-normals)

For using normal-maps, also the Phong material is the right one. Comparing to bump maps, the normal-map looks much better. The Blinn material is also working with normal-maps.

Other attributes like transparency, alpha, reflection, environment-maps, light-maps, glow

Attributes like transparency, reflection and environment maps can be adjusted within the code. E.g. certain names can be used for textures, to trigger additional content, like displaying an env-maps, when this is found in the texture-folder.

Also a lightmap can be used with the Lambert material, but this will require a second UV channel for it. Due to the simplicity of the reflectance and illumination models, performance will be better when using Lambert materials.

Custom-Shaders

For generating more custom shaders and looks, it’s recommended to use different materials within Three.js depending on what is needed (basicMaterial, physicalMaterial, shadowMaterial, etc). When using the custom shaders from Three.js a lot of effects and looks can be achieved.

The physicalMaterial e.g. gives control over a clear-coat reflection and should always have an envmap applied to it.

Examples:

And in genARate Studio:

genARate Studio offers a basic material setup that covers simple diffuse textures. To apply other materials and to access material values html fragments can be used.

Animations

Three.js supports the import of animations with FBX and to animate various properties of the 3D-object within it.

In general, only the newer Versions of Maya and 3dsMax support a native export of several animation-clips, but there are also plugins available for doing it. A lot of different animations and attributes can be animated and exported to Three.js via the fbxLoader, but other things should be done directly within Three.js.

General things to consider when exporting animations
Fbx Settings:
  • Animation check-box must be checked
  • Bake-animation is good to use by default (or manually bake)
  • Deformed models checkboxes only when using skin-weights or blendshapes
Maya Settings
  • Pivot-points shouldn`t be modified for animations
  • Freezing/resetting transformation values also can lead to problems in animations
  • Constrained animations should be baked if possible
  • For skeleton-animations it is best practice to use one mesh and one texture bound to the skeleton
  • It`s good to have the non-deformer history deleted before exporting
Simple Animation – Folding planes to a cube

For this example, it would be best to move the rotation-pivot to the border of the plane, to than rotate it from this position. But if doing so it will lead to problems, because the Three.js importer does not accept other rotationpivots than the original ones.

Therefore, the planes need to be rotated around the original center of the plane and not around the border-edge.

To get the animation correct, there are several workarounds that work in Three.js like grouping objects for different pivots, parenting the object e.g. on a locator (null-object) and rotating the locator or using bones / joints and skinning the meshes to them.

Grouping of objects or using locators:

  • Either groups or locators can be used for rotating around other pivots than the original ones
  • Transformation values for the planes should not be freezed for avoiding problems in the animation

Constraints

  • When using constraints instead of grouping/parenting the object to the locator, it´s best to bake the constrained geometry and then export the animation without using the constraints
  • It works with the fbx preview but not with the Three.js importer therefore it is recommended to bake the keys or solve the constraining part by code Bones and skin-weights (without rig)
  • One of the most consistent ways of working with animations and deforming objects
  • For avoiding problems, it is recommended to work with one mesh and one attached texture being controlled by a skeleton
Example: Slot Machine
  • Slotmachine turns and scales-up as intro
  • Then the arm is pulled and the wheels start turning, till they stop all at the “cherry” position
  • Slotmachine is standing on a shadow-plane

Maya Groups

Comparison of FBX Review and Three.js import (see picture above)

  1. Alpha-channel from shadow-plane is not being loaded.
  2. Shadow-plane disabled; nothing shows up, when it’s included.
  3. Textures are blurred
  4. Rotation-pivot was modified and freezed (groups-pivot)-> broken animation
  5. Rotation-pivot from group was modified (see above)
  6. Display-error; texture missing?

How to correct the errors:

  1. Alpha-channel (transparency) should be added by code in three.js; use of different shaders See 1.
  2. No solution found yet
  3. Pivot point shouldn’t be modified; use of bones, groups without changing the pivot
  4. Pivot point shouldn’t be modified; use of bones, groups without changing the pivot
  5. Mesh-separation and new textures for the new meshes

Corrected version in three.js

Close Menu
Close Panel