3D EDITOR ONLINE FREE – TUTORIAL – 3D Editor Online Free

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

3D EDITOR ONLINE – The Navbar. It provides an easy access to import/export options and to add any object on the scene.
3D EDITOR ONLINE – Play/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.
3D EDITOR ONLINE – Project settings. Here you can setup the project settings.
3D EDITOR ONLINE – Outliner. Where you have listed all the elements that are included on the scene (3D objects, lights and cameras).
3D EDITOR ONLINE – Properties 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.
3D EDITOR ONLINE – Toolbar 3D. You can translate, rotate or scale any element, on local or global mode.
3D EDITOR ONLINE – Scene editor. Here you can directly edit your scene and select any element to edit it.
3D EDITOR ONLINE – Add. 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.