Skip to main content
๐ŸงŠ 3D Model
Updated over 5 months ago

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

  1. Press the 3D icon on the top bar.

  2. 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

  1. 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

  1. Drag the handle to 100.

  2. Adjust the angle, scale, and position of the 'Your Uploaded Modelโ€™.

  3. 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
โ€‹

(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
โ€‹

(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
โ€‹

(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
โ€‹

  • 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
โ€‹

(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
โ€‹

  • 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

  • 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

Did this answer your question?