With the 3D features, you can import 3D models and make interactive 3D animations.
๐กJumpstarts your journey with fun and speedy learning by duplicate
Dora Project - ๐ 3D Features
Use 3D widgets
Step 1. Add a 3D widget
Press the 3D icon on the top bar.
Drag to create a 3D widget of a specific dimension in the canvas.
Or drag a 3D widget from the 3D icon on the top bar.
Step 2. Import a 3D model
Click the import button on the 3D widget.
Or click the Import button on the top bar of the 3D editor.
๐ A 3D scene supports importing multiple 3D models.
๐ The 3D file
Ensure your 3D file isn't damaged or has the correct and supported file extension. The file should be less than 20MB
.
Supported formats 3ds, dae, fbx, glb/gltf, obj, ply, zip
๐ข To ensure the 3D site performs best in this version, we suggest users have less than four 3D widgets. (There are no limits to the number of 3D models within a 3D widget.)
Step 3. Enter 3D editor
Double-click on the 3D widget or select the 3D widget child layer in the left panel to enter the 3D editor.
Step 4. Adjust camera
Every 3D widget contains a built-in default camera that sets as the current camera. You can adjust it by using the following steps:
| Rotate | Zoom in or out | Move |
Touchpad | Press and drag | Zoom in or out with two fingers. |
|
Swipe up or down with two fingers. | Press and move to a direction with two fingers |
|
|
Mouse | Left-click and drag | Scroll the mouse wheel | Right-click and drag the canvas |
You can also click on the camera menu to switch the current one to another.
Step 5. Edit 3D model
Use the buttons on the top bar to Move, Scale and Rotate the 3D model.
Create a 3D scroll animation
Step 1. Insert a 3D widget
Insert a 3D widget into the canvas.
Step 2. Import a 3D model
Import a prepared model.
Step 3. Open Keyframe Drivers
Open the Keyframe panel on the top bar.
2. Select the {Your Model Filename} layer under the 3D scene on the left panel.
Step 4. Set the start keyframe
Add a keyframe when the handle is at 0
.
Step 5. Set the end keyframe
Drag the handle to
100
.Adjust the angle, scale, and position of the 'Your Uploaded Modelโ.
Add an end keyframe.
Step 6. Preview
Click the Preview button to preview the 3D scroll animation.
๐ก Extra tips
Add keyframes to change a model's size, position, and other properties, including lights and cameras.
More settings for animation include Blend Modes, Autoplay, Speed, and Current frame.
FAQs
Animation
โ
Animation
โ
(Left: correct model in 3D software, Right: broken animation in Dora)
Bone animations incompatibility with Dora: Consider converting the bone animations to vertex animations or use an intermediary software or plugin that can help make the conversion suitable for Dora.
Missing or incorrect keyframes: Double-check the animation in 3d software before exporting. Ensure that all keyframes are set correctly. Consider baking the animation to ensure continuity in the keyframes. When using Blender, always remember to thoroughly review and select the appropriate options and bake all option in the export panel.
Model Corruption / Not Displaying
โ
Model Corruption / Not Displaying
โ
(Example of model corruption)
Incorrect glTF import: Ensure that the importing software or platform supports the glTF version you're using. Update the software/platform or use a converter.
Invisible location: Reset the model's position to the scene's origin point. This ensures it's not being placed outside the visible area.
Broken model construction: Inspect the model in 3d software using different view modes like wireframe. Check for any non-manifold edges, overlapping vertices, or other anomalies.
Incorrect export: Double-check export settings. In Blender, ensure the appropriate options are selected and no necessary data is excluded.
Material
โ
Material
โ
(Example of texture missing)
Missing textures or materials in glTF/glb: When exporting, ensure you're embedding or packing all necessary textures and materials with the glTF file. Also, make sure they are baked and saved in the right path.
Incorrect texture paths or missing files: Check the file paths in the glTF file. Make sure all texture files are in the correct location. If unsure, try using a simple color material to see if the model appears correctly.
Performance
โ
Performance
โ
High polygon count: For models with a high polygon count, it's crucial to optimize by reducing the number of polyfaces as much as possible without significantly affecting the model's detail. In Blender, you can employ the Decimate modifier to efficiently lower the polygon count. Aim to adhere to the industry standard by keeping your models under 100,000 polygons. However, for web-based renderers like Dora, it's advisable to aim for fewer than 10,000 polygons to ensure smooth performance and quick loading times.
Unnecessary data in glTF: Ensure you're only exporting what's needed. Clean up the 3d file by removing any unused data blocks, animations, or materials before exporting.
Lighting & Shadow
โ
Lighting & Shadow
โ
(Example of reverse normal and affecting the model textures)
Incorrect normals: For issues with incorrect normals, you'll need to flip the offending faces to ensure they are oriented correctly. In Blender, this can be done by entering Edit Mode and enabling backface culling to identify the faces with inverted normals. Then, select all the vertices and use the "Recalculate Normals" function (Shift + N) to make all normals face outward. This step is not only crucial for correct lighting and shading but can also resolve certain problems with materials appearing broken.
Coordinate & Scale
โ
Coordinate & Scale
โ
Mismatched units: Check the unit settings in both your 3d software and the Dora renderer. Make sure they're consistent. Adjust the scale during export if necessary.
Incorrect coordinates during export: Reset the model's position and scale in your 3d software before exporting. Ensure the origin point is set correctly.
Troubleshooting Method
Troubleshooting Method
File Check
Import into glTF Validator/three.js to check if there are errors in the glTF file.
3D Roadmap
๐ฉ Alpha 2.0
Function
Support Adding of 3D Widget (a container can put 3d models)
Inside one 3d widget, users can insert Multiple Models/Lights/Cameras, adjust their position, and perspectives, and zoom in and out.
Animation 3D Widget supports using Keyframe.
Import 3D model limitations:
File size
<20MB
Support Format๏ผ
3ds, dae, fbx, glb, gltf, obj, ply, zip
๐ฏ Beta
3D post-processing
โ live
Pixelation, Aberration, Bloom, Hue, Brightness, Vignette, Noise, etc.Environment Settings
None, Equirect, Modelviewer
HDR
Shortcuts
Light
Add new lights: Ambient Light, Directional Light, Hemisphere Light, Point Light, Spot Light
Light settings
Keyframe/Interaction
๐ Planning
Material
Add new materials, replace materials, etc.
Replace material used in keyframe or interaction.
Camera
Add new cameras: Orthographic Camera, Perspective Camera