3D Model

With this element, you’are able to include 3D Models to your website with ease.

3D Model

Settings

You can configure the following settings for this element:

3D Model

SettingDescription
3D ModelThe 3D Model file(s). Must be in .gltf format. You can upload the .gltf file itself or a .zip file containing the .gltf file and its dependencies (.bin, .png, etc.). If you upload a .zip file, make sure that the .gltf file is in the root of the .zip file.
Scale XThe scale of the model on the X axis.
Scale YThe scale of the model on the Y axis.
Scale ZThe scale of the model on the Z axis.
Position XThe position of the model on the X axis.
Position YThe position of the model on the Y axis.
Position ZThe position of the model on the Z axis.
Rotation XThe rotation of the model on the X axis.
Rotation YThe rotation of the model on the Y axis.
Rotation ZThe rotation of the model on the Z axis.
Allow AnimationWhether or not to allow animation of the model.

Canvas

SettingDescription
Canvas WidthThe width of the canvas.
Canvas HeightThe height of the canvas.

Camera

SettingDescription
Vertical Field of ViewThe vertical field of view of the camera. This is the angle between the top and bottom planes of the camera’s view frustum.
Near Clipping PlaneThe distance to the near clipping plane of the camera’s view frustum. Objects closer than this will not be rendered.
Far Clipping PlaneThe distance to the far clipping plane of the camera’s view frustum. Objects further than this will not be rendered.
Position XThe position of the camera on the X axis.
Position YThe position of the camera on the Y axis.
Position ZThe position of the camera on the Z axis.

Light

You can add up lights to the scene. The following lights are available:

Light TypeDescription
AmbientA light that affects all objects in the scene equally. This light cannot be repositioned.
DirectionalA light that is infinitely far away and has a direction but no position. This light cannot be repositioned.
HemisphereA light that is positioned infinitely far away and has a direction but no position. This light cannot be repositioned.
PointA light that illuminates from a specific point in all directions. This light can be repositioned.
RectAreaA light that illuminates from a specific rectangle in all directions. This light can be repositioned.
SpotA light that illuminates from a specific point in one direction. This light can be repositioned.

Each light has the following settings:

SettingDescription
TypeThe type of the light.
ColorThe color of the light.
IntensityThe intensity of the light.
Cast ShadowWhether or not the light casts shadows.
Position XThe position of the light on the X axis.
Position YThe position of the light on the Y axis.
Position ZThe position of the light on the Z axis.
Ground ColorThe color of the ground. This is only used by the Hemisphere light.
WidthThe width of the light. This is only used by the RectArea light.
HeightThe height of the light. This is only used by the RectArea light.
AngleThe angle of the light. This is only used by the Spot light.
PenumbraThe penumbra of the light. This is only used by the Spot light.

Interaction

SettingDescription
Enable InteractionWhether or not to enable interaction with the model.
Enable ZoomWhether or not to enable zooming.
Enable PanWhether or not to enable panning.
Enable RotateWhether or not to enable rotating.
Min DistanceThe minimum distance to the model when zooming.
Max DistanceThe maximum distance to the model when zooming.
Prevent Bottom ViewWhether or not to prevent the user from viewing the model from the bottom.
Prevent Top ViewWhether or not to prevent the user from viewing the model from the top.
Rotate SpeedThe speed of rotating.
Zoom SpeedThe speed of zooming.
Pan SpeedThe speed of panning.

Animation

SettingDescription
Enable AnimationWhether or not to enable animation of the model.
Animation TypeThe type of animation. This can be either Rotate Left, Rotate Right, Rotate Up, Rotate Down.
Animation SpeedThe speed of the animation.

Renderer

SettingDescription
Anti AliasingIf you enable this, the edges of the model will be smoother. This will however decrease the performance.

FAQ

Which formats are supported?

Currently, only the .gltf format is supported. This format is supported by most 3D modeling software and is the recommended format for 3D models which are used on the web. You can upload the .gltf file itself or a .zip file containing the .gltf file and its dependencies (.bin, .png, etc.). If you upload a .zip file, make sure that the .gltf file is in the root of the .zip file.

From where can I get 3D models?

There are many websites where you can download 3D models. Some of them are:

Can we animate the model with the Bricksforge Panel?

Not yet. But we’re working on it.