Skip to main content

Three.js Integration

Explore how to import Three.js with your ezsite application.

What is three.js ?​

Three.js is a cross-browser JavaScript library and application programming interface (API) used to create and display animated 3D computer graphics in a web browser using WebGL.

How to Build a 3D Website Using Three.js in ezsite​

Want to create a stunning website with 3D models? Follow these steps to import and use 3D models in ezsite.

Step 1 - Create a Project for interactive 3D graphics​

  1. Open ezsite.
  2. Click the "Create new project" button.
  3. Enter your dream idea in the text box

For example:

Create a 3D model display system
  1. Click "Generate your website".

Step 2 - Get Your 3D Model​

You can either:

  • Create your own 3D model and upload it to a publicly accessible server.
  • Download a model from a 3D resource website.

Recommended 3D model sources:

Example model links:

Step 3 - Import the 3D Model into ezsite​

  1. Open your project in ezsite.
  2. Click the Settings button in the top-right corner.
  3. Navigate to the Custom Knowledge tab.
  4. Add your 3D model names and their corresponding links.
3D Models:
- dog (https://cdn.ezsite.ai/autodevweb/3d_model/dog_gltf/scene.gltf)
- small_car (https://cdn.ezsite.ai/autodevweb/3d_model/small_car_gltf/scene.gltf)

Step 4 - Instruct the Coding Agent to Use the 3D Model​

Using the chat interface on the left side of the project, you can communicate with the Coding Agent and specify when and where to use your 3D model.

Example Prompt:

Type this into the chat interface on the left side of your project, and the agent will handle the rest!

Please add the 3D models described in Custom Knowledge to the scene.