Tutorial: 'Add Arc Camera' placeholder question

Hi there!

I just started learning Babylon.js. I was going through the tutorial and noticed there was a difference between what the tutorial says and what the playground v.7.16.0 is showing. Came here to gain more insight!

TL;DR
The templates seem to include placeholders like ${1:camera} for the arguments which the tutorial doesn’t offer more information on. What is the intention for this? How should it be understood by beginners?


The tutorial says to create an Arc Camera. When I looked at the options, there were two templates:

  1. Add Camera: Arc Rotate Camera w/ Degrees
  2. Add Camera: Arc Rotate Camera w/ Medians

image
I chose the degrees template as the tutorial didn’t specify which one.

Then I get the following code:

    var camera = new BABYLON.ArcRotateCamera("${1:camera}", BABYLON.Tools.ToRadians(${2:0}), BABYLON.Tools.ToRadians(${3:57.3}), ${4:10}, ${5:BABYLON.Vector3.Zero()}, scene);

    camera.attachControl(canvas, true);

When I tried to save the scene and run it again as the tutorial advised, I got an error message saying, Uncaught SyntaxError: missing ) after argument list. After trying different fixes, I eventually referred to the Camera Introduction to replace the placeholders with valid values.

I understand that the placeholders are template literals, but could someone help me understand the intent of this syntax? ex) ${1:camera}, ${2:0}. ${3:57/3}

Thanks in advance!

Hello @nene and welcome !

@roland had the same problem but he was the only one so far. This syntax should not appear in the code. It’s used in backend by the editor, to create some “TAB” spaces :

new BABYLON.ArcRotateCamera("${1:camera}", BABYLON.Tools.ToRadians(${2:0}), etc...

Means that the code which should be returned is

new BABYLON.ArcRotateCamera("camera", BABYLON.Tools.ToRadians(0), etc...

But with the camera and 0 selected. You can directly type to change the name, and then you can move from a param to another just using tab. At least that should be so.

Here is how it goes on my side :
Screencast from 26-07-2024 12:49:09

@RaananW since you reviewed the last changes on the PG, I guess you also cannot reproduce this behavior, right ?


@roland , @nene , since you can reproduce, can you please give details about browsers you tested this on, OS, and also did you try to force a reload (CTRL+F5) ?

1 Like

You can directly type to change the name, and then you can move from a param to another just using tab. At least that should be so.

This is a great tip! :smiley:

@roland , @nene , since you can reproduce, can you please give details about browsers you tested this on, OS, and also did you try to force a reload (CTRL+F5 ) ?

This occurred in Playground v.7.16.0 using Google Chrome on a Mac with Sonoma 14.5 OS.

When I tried to force a reload, the playground version updated to version 17.17.2 and the issue was fixed. I was able to load the intended code and use the TAB button to move to the next param.

I tried doing the tutorial in both JS and TS version, and couldn’t recreate the issue.

@Tricotou I ran into the same issue today. The code inserted into the editor was:

new BABYLON.ArcRotateCamera("${1:camera}", BABYLON.Tools.ToRadians(${2:0}), etc...

It’s not working when I can see this in the console:

I don’t remember seeing this behavior, no.

Any way to reproduce this, or was it solved already with the latest update?

I can’t always reproduce it now but it has happened several times yesterday. Quite annoying :frowning:

Unfortunatelly I can’t. Nothing is selected after the code is inserted so I have to manually move the cursor to the values I need to change.

I can’t reliable reproduce the issue. Sometimes it works/sometimes it doesn’t.

MacOS, Version 126.0.6478.185 (Official Build) (arm64)


I’ve tried it now once again and voila it failed this time:

  1. new Chrome tab
  2. playground.babylonjs.com
  3. start typing: arc
  4. select Add Camera: …

The cursor is at the end of the inserted code snippet.