How to Create Your 3D Story (Step‐by‐Step User Guide)

How to Create Your 3D Story (Step-by-Step User Guide)

Preparing the Model

1. Find a 3D object you want to tell a story about.
2. Scan the object using a scanning device (e.g. Artec 3D) or an app (e.g. RealityScan).

• You can also check the Sketchfab library.
• Alternatively, create a 3D model from scratch if you know how.

3. Import the model into Blender.

4. Apply the Decimate Modifier to reduce the number of vertices (should be less than 10K).

5. Adjust texture size: The maximum recommended texture size is 2048x2048px (use Photoshop for this).

6. Export your model into gLTF format (.glb/.gltf).

• Activate the “Compression” checkbox.

7. Check the model using one of the gLTF viewer apps:

• glTF Report
• glTF Viewer from React Three Fiber
• Simple glTF Viewer

8. Integrate the model into the "modelComp" folder.

Write Your Story

• Use JSON format to divide the story into slides. Each slide will be inserted inside a container with a size of 100% of the browser window.
• Avoid long descriptions on a single slide to prevent content overlapping. Try to come up with a title for each section.

How to Activate Edit Mode

1. Open the main.jsx file and change the boolean value of editMode to true.

const editMode = true;

2. You can hide the edit mode windows by pressing "Option + " for Mac users or "Alt + " for Windows users.

Animation Process

Similar to modern applications using a timeline approach, like After Effects or Blender. Theatre JS is a handy framework for creating animations based on a JSON file. For more information, visit Theatre JS Documentation.

1. Set up the initial position of the 3D object.

2. Create the first keyframe using the props keyframe indicator. It will create three keyframes for Position, Rotation, and Scale values.

• Tip: It's better to use the props keyframe indicator/button rather than Position, Rotation, and Scale separately. This way, the animation can be adjusted on any keyframe. For example, if you decide to add a Scale animation to an existing Rotation animation.

3. Ensure the initial position of the object before starting the animation process is [0, 0, 0]. It can be adjusted after finishing the animation with screen query rules.

4. Move the model like in any 3D application by clicking on the camera icon (create a snapshot). This will open a window with the gizmo control tool.

5. Scroll to the next text section, press the props button, and refine the position of the 3D object. Repeat this procedure for all slides. Theatre JS will handle the transitions between keyframes. For more information, please visit the Theatre JS official website.

Export the JSON File

1. Choose the top level in the left dropdown menu.
2. The props panel will change to “Export –project name– to JSON”.

3. Press the button to generate the JSON file.

4. Import the JSON file to the 3D object page and insert the imported name here (jsonFileName):

const project = getProject('--Animation name--', {
  state: --jsonFileName--
});

Enjoy! :)