Threejs editor

Three JS Editor is a minimalistic yet very useful 3D graphics editor based on WebGL and the ThreeJS library.
Three.js is a lightweight cross-browser JavaScript library used to create and display animated 3D computer graphics when developing web applications.


Clickable

When working with the ThreeJS library, all graphics are created in code, this is fundamental, but not productive. The tendency shows that it is the graphics that are more to go into the context of the editors, that is, to create through the editor, and then the logic for the dynamics is attached to it. The ThreeJS editor is very useful, it makes it possible to develop graphics in a graphical environment, by a click method, and to tie logic in a code editor.

The cycle of working with ThreeJS editor
1. Immediately work in the ThreeJS editor. The method is good only if your objects are not very complex, that is, if the objects of the ThreeJS editor are right for you.
')
2. Use additional editors to create more complex textures (Blender, Unity). Then they are uploaded and loaded into the ThreeJS Editor, corrected and exported the finished project, already through ThreeEditor.

The picture for the article is most likely done this way, by using objects from other editors.

Editor Setup
There are so many settings

• You can choose a topic
• Autosave
• Show the grid or not
• Save action history
• Render Selection (Graphics Processor)

Project upload
Unloading is done very simply in the menu. The main part of the project is uploaded in a json file. Please note that all textures (images) are not uploaded in jpg or png, but in base64 format, directly in the app.json file. After unloading it is better to replace it with direct links to pictures.

Work in code
The Three.js library defines the THREE class, which encapsulates a scene object, a camera, lighting, materials, textures, etc. All operations for manipulating graphics after unloading should be done in the app.js file.

The project must be run through a local server or through LivePreview in the Brackets code editor.

The article does not specifically specify the buttons and menu items, as the editor develops and they can change their position, and the interface itself is intuitive.

The editor is already suitable for work.

Example:

camera.position.z = 5; camera.rotation.z = 5; var geometry = new THREE.CubeGeometry(1,1,1); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var object = new THREE.Mesh( geometry, material ); scene.add( object ); scene.remove( object ); 

References:
http://threejs.org/editor/
https://threejsdesktop.imtqy.com
http://threejs.org