3D EDITOR ONLINE FREE – TUTORIAL

Share

Introduction

3D EDITOR ONLINE is completely free and complements the functions of viewer, editor and converter for the most used 3D file formats. You can use textures choosing from your images into the 3D object materials, and you can export it like whole scene or single object.

With this editor you will be able to create your personalized videos using your avatar or real interactive games.

Interface
  1. 3D EDITOR ONLINEThe Navbar. It provides an easy access to import/export options and to add any object on the scene.
  2. 3D EDITOR ONLINEPlay/Stop. Here you can play or stop your 3D scene. If you have any script associated to your objects, when you press play, it will run the script.
  3. 3D EDITOR ONLINEProject settings. Here you can setup the project settings.
  4. 3D EDITOR ONLINEOutliner. Where you have listed all the elements that are included on the scene (3D objects, lights and cameras).
  5. 3D EDITOR ONLINEProperties panel. If you have an element of the scene selected, here you have all the info needed to modify it. Some of the fields are editable, others are only readable.
  6. 3D EDITOR ONLINEToolbar 3D. You can translate, rotate or scale any element, on local or global mode.
  7. 3D EDITOR ONLINEScene editor. Here you can directly edit your scene and select any element to edit it.
  8. 3D EDITOR ONLINEAdd. A visual way to add elements into the scene.
Import

You can import any 3D file you have in your device, or any object/scene exported (JSON format). Binary glTF (.glb) is recommended because you have included the materials too.

3D Converter Online
CONVERt Object

Convert any object selected in any 3D file.

3D Export Online
Export Object

Export any object selected in any 3D file ir JSON format.

Export Scene

Export the whole scene in JSON format.

Export glTF 

Export any object selected in any 3D file.

Undo/Redo 

You can undo or redo any action pressing these buttons (see video below) or through the toolbar / Edit / Undo or Redo.

3D Project settings 

You can show/hide it pressing ‘info’ icon next to undo/redo buttons. Here you can set the name of your project, if you want to autosave automatically, to set up the renderer basic properties or if you want to have VR support. In addition to this, you can set the background color and the fog of your scene. You have an info part with all the objects, vertices and triangles on the scene, this directly affects the performance of your scene.

How to use the scene graph 

Inside it, you can drag the elements and organize it with hierarchy.

Using multiple cameras 

If you have multiple cameras in your scene, you can change the camera that will be active on the scene graph.


3D Adding Objects 

Add a Group 

Groups are useful for multiple 3D objects to share their position, rotation and scale properties.

Add a 3D Object 

You can add up to 14 different 3D shapes. If you need to add another different shapes, you can import it from your device if you have a 3D model saved.

Add a Light 
Ambient light 

This is a light that will project the same amount of light in every direction. You can change the intensity (1 by default) and color.

Directional light 

This light emits light from a position projecting shadows (if you have Cast checked) and different intensity depending on its position.

Hemisphere light 

This light is similar to the ambient light (same light in all directions) but you can set up top and bottom color.

Point light 

This is similar to a bulb, you have the same properties as the directional light and you can play with its distance and decay.

Spot light 

It is a cone of light, you have similar properties than point light and a penumbra parameter to smooth the light in the corners of the cone.

Add a Camera 
Orthographic camera 

With this camera all objects appear at the same scale.

Perspective camera 

The objects which are far away are smaller than those nearby.


3D Object properties 

ID related properties 

Every element added to the scene it has a unique UUID, you can renew it, but it is not a must. Name field is important to manage your elements from the scripts.

Position / Rotation / Scale related properties 

You can edit these parameters to exact values or dragging the pointer.

Visibility related properties 

Beyond visible, frustum cull removing objects that lie completely outside the viewing frustum from the rendering process. And Shadow / Cast / Receive are a MUST if you want to use shadows on your scene.

Custom properties 
Camera 

The most common properties to edit here are the FOV (Field of view) (the common values are from 35 to 90) and the near and far, if you want to adjust the renderable area.


Geometries 

Geometry basics 

Each 3D object is a Mesh and this mesh has two parts, a geometry and a material. This geometry determines the shape of the object.

ID related properties 

Similar to the object (Mesh) element, each geometry has its own UUID and name.

Custom properties 

Each geometry it has its own properties. For example a Box has width, height and depth and how many segments are made up.


3D Materials 

Materials basics 

Every 3D object has a material (by default is a MeshStandardMaterial). It is important to know that multiple objects can share the same material (you can copy and paste between them).

Types of materials 
Common types used 

Although there are more than 10 types of materials, most of the time we will use one of these two.

MeshBasicMaterial 

It is the cheapest (in performance) because it doesn’t calculate any light. It is like an unlit material, and it is commonly used with an image as a map texture.

MeshStandardMaterial 

It is the most realistic one but expensive (in performance). You can play with multiple maps and with roughness and metalness values. It is the closest thing to a PBR material.


3D Scripts 

Add a new script 

On each element of the scene you can add multiple scripts. Programming with JS and following this manual you can add interactivity to your project.

Use predefined scripts 

You can add three examples of basic code to your elements. Rotate, translate or/and scale it.

DO YOU NEED YOUR PERSONALIZED PROJECT OR VIDEO?

Contact Us


    Share