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.
3D Scripts
Add a new script
On each element of the scene you can add multiple scripts. Programming with JS and followingthis 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?
Glaoigh orainn