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:
Add Camera: Arc Rotate Camera w/ Degrees
Add Camera: Arc Rotate Camera w/ Medians
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}
@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 :
@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) ?
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!
@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.