Using the Three.js Editor

Here are some basics about using the the three.js editor. If you haven’t seen it in action, you can do so here.

I couldn’t find any real documentation online about it so figured I’d post about I’ve found from it… The editor comes packaged along with the three.js source code. Let’s download that and open index.html (in the “editor” folder).

The interface is pretty straight forward. Starting from the top-left menu, you can import and export scenes or individual models in a variety of formats, clone, add basic geometry, cameras and lights.

The “add > group” menu item allows you to add an empty group scene node that you can parent items to. Try adding a couple shapes to the scene, then parenting them to the group in the scene graph.

Next down in the top left menu is the play button. If you press it, you’ll probably see a black screen. Press “stop” go back to normal view. This is because there needs to be a scene with some scripting in order for there to be something to play.? Go the the next item “examples” and pick one from the drop down list then press play and see what happens. Press stop and for now lets stick with the “camera” example. We’ll come back to scripted scenes in a bit.

Select any object and notice the object properties appear on the right side. You can also manipulate the objects in different ways through basic settings on the bottom left.

You’ve probably already figured out all of this on your own, but what about making some cool animated scenes like the ones from the drop-down menu? For that, we’ll need to apply scripts to selected objects then publish the scene and optionally load it back in to view it.

1. Add objects

File>New>okay

Add two point lights, a torus and a perspective camera. Position them roughly like the below example

2. Script

select the perspective camera through the scene graph, click script>edit

here is the code to paste in

player.setCamera( this );
function update( event ) {
var time = event.time * 0.001;
this.position.x = Math.sin( time ) * 400;
this.position.z = Math.cos( time ) * 400;
this.lookAt( scene.position );
}

Then repeat for the torus using this script

function update( event ) {
this.rotation.z += 0.1;
}

Press play, and you should see something like this. (Torus spinning while camera rotates around it).

3. Publish

File>Publish (File>Export Scene doesn’t seem to export the scripts)

You’ll notice that it creates a zipped file containing:

• app.json (the exported data from our scene)
• index.html (the page that will play our exported scene)
• a js folder containing app.js (the player logic) and three.min.js (I didn't export this file for me so I had to copy it from the latest build manually)

open index.html in your browser to preview the exported scene. Again, if you see nothing, make sure to include a copy of three.min.js in your js folder.

 

Example Files

As a side note, you’ll notice the scripts we wrote for the scene objects at the bottom of the exported app.json file. If you’d like to see more scripting examples, go back to your editor files you initially downloaded and look in the editor>examples directory. At the bottom of the app.json files you can copy the scripts to test them out. Just be sure to remove the formatting, as in the “\n” and “\nt”.

you can also load an editor scene into your three.js project via THREE.SceneLoader().

There’s a complete example of?Loading a Scene file into a? project in the three.js download files called webgl_loader_scene.html.

The editor is still quit mysterious but I’m excited about what it will be in years to come. For now, hope this helps you out a little!

If you’d rather not to the editor route, you can always simply load objects into Three.js directly.