Quick Start Guide

Quick Start Guide

Quick Start Guide for EasyThree (Windows Application)

Step 1: Install the Application

  1. Download the EasyThree installer from our website.
  2. Run the installer and follow the on-screen instructions to complete the installation.
  3. If you don’t have already installed Node.js, you can download and install Node.js from their respective website. This step is not necessary but is easiest way to get working and fully integrated Localhost web server in application. Of course, you can use any web server you want.

Step 2: Launch the Application

  1. After installation, open EasyThree from your desktop or start menu.
  2. Log in with your account credentials or sign up for a new account if you don’t have one.

Step 3: Create a New Project

  1. Enter a name for your project and select a save location.
    This is a working folder of your project.
  2. Click on the “Create New Project” button on the main interface.
  3. When you create project you actually unlock all commands in application and your creation process can start.

More information for this part of interface you can find on “Project Setup” page.

Step 4: Import Your 3D Model

  1. Navigate to the “Model and Material” section within your project.
  2. Click the “Open 3D Model” button and select your 3D file from your device (supported formats: .gltf, .glb, .fbx, .obj, .3ds, .dae ).
  3. Any part of 3d Model and material will be reeded from file and displayed on the objects primitives and material list.

More information for this part of interface you can find on “Model and Materials” page.

Step 5: Add Images as Textures

From here, you have two options:

  • Add images as global e.g. images are not connected to any particular object or material.
  • Choose object primitive or material and add images just for that primitive.

  1. If you want to add images globaly, and apply them on 3D model later as textures on web frontend you can click “Add/Edit Images Global”
  2. Choose an object primitive or material from the list and click on the “Add Images” button and load some images from your device.
    Adding images this way will connect images just to selected object and material.
  3. If you need, you can easily edit or remove images later from panel below. (e.g., scaling, tiling).

More information for this part of interface you can find on “Model and Materials” page.

Step 6: Configure Scene, Camera, Lights, and Orbit Controls

  1. Scene: Adjust the environment settings such as background, Sun/Sky environment, Web GL parameters and other things important to your scene.
  2. Camera: Set up the camera type, FOV, Clipping planes and Aspect Ratio …
  3. Lights: Add and configure different types of lights (e.g., directional, point, spotlights) to enhance the appearance of your model.
  4. Orbit Controls: Choose, add and customize how users can interact with the model (e.g., rotation speed, zoom limits).

You can find more information for all parts of particular interface on “Scene Setup“, “Camera“, “Lights” and “Orbit Controls” pages.

Step 7: Configure Camera Views

Nice part of our application is possibility to add different camera views of your 3D Object. You can do that very easy and later use them on frontend.

  1. Go to the “Camera Views” section within your project.
  2. On that tab page, first you need to navigate your camera/view in integrated web browser to desired location.
  3. Click “Fill Project Data” button and all important data will be saved as camera view.
  4. Set Easing and duration time for your camera transitions on frontend.
  5. If you want you can add image to clickable frontend object.

Find more information for this part of interface on “Camera Views” page.

Step 7: Configure HTML Frontend

  1. Go to the “HTML Setup” e.g. Frontend Configuration section.
  2. Customize the HTML settings to match your website’s design and branding.
  3. Add your logo, favicon and select menu position, set animations type and duration and colors as you want.
  4. Preview the changes to ensure everything looks as expected.

You can find more information for this part of interface on “HTML Setup” page.

Step 8: Export to FTP Server

  1. Once your project is ready, navigate to the “Export Setup” section.
  2. Enter your FTP server details (e.g., ftp server address, username, password).
  3. Click the “Upload Project” button to upload the files to your online server.
  4. Your created project is actually full standalone web site and you can then navigate to http/https online location to see final result.

You can find more information for this part of interface on “Export Setup” page.

Additional steps

Step 9: Create Embed Code – iFrame

If you want to embed your project to already created and running web site you can generate iFrame code to import your 3d model.

  1. After exporting, you can create an embed code in the form of an iFrame.
  2. Click “Generate iFrame” button to get your iFrame code
  3. Click “Copy iFrame and CSS” button to copy the iFrame code.
  4. Generated code is responsive iFrame and can be embedded in any part of your web site.

Step 10: Publish

  1. Paste the iFrame code into your website’s HTML where you want the 3D model to appear.
  2. Save and publish your website.
  3. Share your website link with your audience and let them explore your 3D creation.

You can find more information for this part of interface on “Export Setup” page.