With the 3D features, you can import 3D models and make interactive 3D animations. It‘s easy to make a website like hape.io in minutes.

https://www.hape.io/

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.

<aside> ℹ️ A 3D scene supports importing multiple 3D models.

</aside>

<aside> ℹ️ 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

</aside>

<aside> 📢 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.)

</aside>

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:

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.

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

<aside> 💡 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.

  

</aside>

FAQs

Animation

Model Corruption / Not Displaying

Material

Performance

Lighting & Shadow

Coordinate & Scale

Troubleshooting Method

→ Use 3d widgets

→ Add a 3D widget

→ Import 3D Model

→ Enter 3D editor

→ Adjust camera

→ Edit 3D model

→ Create a 3D keyframe animation

→ FAQs

→ 🗺 3D Roadmap

3D Roadmap

<aside> 🚩 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

</aside>

<aside> 🎯 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

</aside>

NEXT: 📲 Mobile Breakpoint