Learn how to add and scale interactive 3D models in your ebook with Kotobee Author. Your  readers can view and rotate the models. This guide is for .obj files. To embed HTML 3d Models see Add Custom Interactivity with CSS or JS.

There are many models online available for download, from websites such as TurboSquid. 

To add 3D components

  1. Click on the 3D tool.
  2. Enter a 3D Object Name. This name is optional and will not affect the model's behavior in any way. But it is a way to label the 3D object in editing mode.
  3. Click on the Objects tab button. From the dropdown list, click on Import new object. 
  4. Select the .obj file from your system. Note that you can add multiple objects.
  5. To preview your 3D model, click on the large Render model button under the 3D Model Preview panel on the left. This will render the 3D scene the way it will appear in the book. If the scene is larger than the container, horizontal and/or vertical scrollbars may be used. If the model does not appear, then you need to adjust other settings for the Object, Camera, Lighting, and Scene. This will be covered in the next section.
  6. Click on Create.

Interaction tab

Here you can control how the object is displayed before the 3D model appears.

  • Placeholder image: This image will be initially displayed as a placeholder. Once you click on it, the 3D model will appear.
  • Include overlay message: Check the box if you want to a message appear on top of the placeholder image. You can then change the message. The default is Click to see 3D object.
  • Target: Select if you'd like the model to appear on the page or in a panel.
  • SCORM: Track interactions with this media element in your LMS when exporting to SCORM. You can optionally assign these interactions to a defined objective. You can define new objectives from the Book manager.

Scene

Here you can select general settings for the scene.

  • Width and Height: Represents the scene area which is rendered in 3D. The larger the area, the higher the processor consumption.
  • Class: Marks this element with a CSS class.
  • Background Color: The background color used for the scene. When you click on the fielda color selection window will open.

Objects

Here you can add the object file .obj.

  • Simply click on Import new object.
  • Head to your documents and find the .obj folder you're searching for.
  • Then click on Open.

Camera

Here you can control the camera view for the model.

  • View angle: The view angle that covers models in the scene.
  • Near: Objects that are closer than this distance will disappear from the scene.
  • Far: Objects that are farther than this distance will disappear from the scene.
  • Position: The position of the camera (in 3D space).

Lighting

Here you can control the light sources for your scene. You can add more than one light source, by clicking on Create new light in the drop-down list, when clicking on the tab button.

  • Name: This name will be used as an ID and will not affect the lighting behavior in any way.
  • Light type: There are six different lighting types to choose from, each showing different results. Each light type will display different properties to set, such as color, position, and intensity. 
  • Color: This option changes the color of your lighting.
  • Position: The position of the object in 3D space.
  • Remove light: Removes the light you added and goes back to the default options.