How to write hello world in R3, by hand (no AI)

Your first R3 program, written by hand in JavaScript: a cube, a script that spins it every frame, a message in the console, a key that moves it, and a preview link.

This is the hello world for people who already program. No AI, no credits, nothing to install: you write the code yourself, in the browser. It takes about ten minutes.

The language is JavaScript. Your code runs in the browser, inside the R3 editor and inside any link you share. If you come from C: there is no main.c and no build step. The editor is the runtime, and R3 calls your code. New to the words (component, entityRef, asset)? R3 for programmers maps them to what you already know.

1. Make an empty project

Open the Create menu (or the menu, then Create) and press Empty Project in the Projects section. A new project opens behind the menu, called New Project. The menu stays open: you need it in the next step.

An "empty" project already holds a scene, a renderer, a camera, two lights, a physics world and a few more parts. That is why the canvas is grey and lit, not black.

To rename it, close the menu, click New Project at the top of the Inspector (the panel on the right), type Hello world and press Enter. Every change is kept as you make it: there is no save step for the project.

2. Add a cube and a script

In the Create menu, search for cube and press Cube. Then search for code and press Code. Close the menu.

You now have a grey cube in the middle of the canvas, and a Code component: one script. The cube's mesh is called mesh_cube_1 and the script code_1. These names are each component's entityRef, and in your code they are variable names.

3. Open the script: it runs on RENDER_BEFORE

In the Inspector, open Scripts, then code_1. Its Event field reads Render Before — every frame, before the scene is drawn. A script runs on exactly one event, and RENDER_BEFORE is the main loop: R3 calls it once per frame.

Press Edit Code (or open the code editor here). The editor opens with a template.

4. Write hello world

Add two lines to the template, one in start and one in update, so it reads:

this.start = function() {
  console.log('Hello, world!');
};

this.update = function(data) {
  this.mesh_cube_1.rotation.y += data.delta;
};

return {
  start: this.start,
  update: this.update
};

(The template's comment lines can stay.)

• start runs once, when the code starts. update runs on every event: for RENDER_BEFORE, every frame.
• this.mesh_cube_1 is the cube. Every component of the project is on this, under its entityRef.
• data.delta is the time since the last frame, in seconds, so the cube turns one radian a second, whatever the frame rate.
• The return at the end is required: it tells R3 which functions to call.

5. Save, then Start Code

Press Save (Ctrl+S). Save keeps the code and applies it, but does not start it: a message says "Saved. Press Start Code to run it." Press Start Code in that message (or start the Code system here, or the Code play button in the top bar). Close the editor.

The cube spins.

6. Where "Hello, world!" appears

console.log writes to the browser's developer console, not to the page. Open it with F12 (or Ctrl+Shift+J on Windows and Linux, Cmd+Option+J on a Mac) and choose the Console tab. You see Hello, world! once, each time the code starts.

The console is also where a script's mistakes show up. If your code throws (try this.no_such_mesh.position.y = 1;), R3 stops that script and shows the error in the console, in the status line at the bottom of the editor, and in red on the script in the Inspector. The script runs again once you fix it and Save.

7. React to a key: an interrupt handler

A script on RENDER_BEFORE polls every frame. A script on KEY_DOWN runs only when a key is pressed, like an interrupt handler.

1. Open the Create menu, search for code and press Code again. Close the menu.
2. In the Inspector, open Scripts, then code_2. Set its Event to Key Down (or set it for me).
3. Press Edit Code, and in update add two lines:

this.update = function(data) {
  console.log('Key pressed:', data.code);
  if (data.code === 'Space') this.mesh_cube_1.position.y += 0.5;
};

1. Press Save (Ctrl+S) and close the editor. The Code system is already running, so the new script works at once.

Click the canvas once (so it has the keyboard), then press Space: the cube jumps up half a metre with every press, and the console prints Key pressed: Space. data.code names the physical key ('Space', 'KeyA', 'ArrowUp') whatever the keyboard layout. Holding the key does not repeat it.

8. Share it with a preview link

Open the menu, then Deploy. Under My Projects, find Hello world and press Create Preview. A private link appears: copy it or open it. Anyone you send it to can open it, for 7 days; you can make a new one as often as you like, for free.

On the preview page your code runs the same way: the cube spins, the console says Hello, world!, and Space moves the cube. A preview link is not the same as going live: going live gives the project a public address and needs a plan (Publishing and going live).

What you did, in programmer's terms

• The project is your program.
• A Code component on RENDER_BEFORE is the body of your main loop; one on KEY_DOWN is an interrupt handler.
• The cube's mesh is a component: a struct with live fields. Writing position.y moves it on screen.
• mesh_cube_1 is its entityRef: the variable name your code uses.

Next: R3 for programmers for the whole map, Make something happen on a key press or click for more events, and Code Components for start and update in depth. Every component, event and its data is in the API reference: open it.

All R3 tutorials