this.position.addToRef is not a function

Hi !

I just started out…im trying to make a very basic page

I tried the basic code from the getting started and i get this error:

babylon.js:16 Uncaught TypeError: this.position.addToRef is not a function
at t._getViewMatrix (babylon.js:16)
at t.getViewMatrix (babylon.js:16)
at t.updateTransformMatrix (babylon.js:16)
at t._renderForCamera (babylon.js:16)
at t._processSubCameras (babylon.js:16)
at t.render (babylon.js:16)
at Index.html:18
at t._renderFrame (babylon.js:16)
at t._renderLoop (babylon.js:16)
t._getViewMatrix @ babylon.js:16
t.getViewMatrix @ babylon.js:16
t.updateTransformMatrix @ babylon.js:16
t._renderForCamera @ babylon.js:16
t._processSubCameras @ babylon.js:16
t.render @ babylon.js:16
(anonymous) @ Index.html:18
t._renderFrame @ babylon.js:16
t._renderLoop @ babylon.js:16
requestAnimationFrame (async)
e.QueueNewFrame @ babylon.js:16
e._queueNewFrame @ babylon.js:16
e.runRenderLoop @ babylon.js:16
(anonymous) @ Index.html:17

Here is my index.html

Would appreciate any help… :slight_smile:
Thanks !

1 Like

Hi Roy!

Ouch, this should not happen!

Is that a direct copy from the docs? Did you change anything? And - would you be able to share the code (and not an image) so we can test locally?

Thanks :slight_smile:

In order to get the code for the basic page you may go to the Playground and download the zip file with all necessary HTML and JS code, and it will work with no problems.

Hey Raanan,

Thanks for the quick reply, I couldnt paste the html part here for some reason and it wouldnt let me upload a file since i am a new user so i just pasted the js part…

const canvas = document.getElementById("renderCanvas"); // Get the canvas element

    const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

    // Add your code here matching the playground format

    const scene = createScene(); //Call the createScene function

    // Register a render loop to repeatedly render the scene

    engine.runRenderLoop(function () {



    // Watch for browser/canvas resize events

    window.addEventListener("resize", function () {



    function createScene() {

    var scene = new BABYLON.Scene(engine);

    // This creates and positions a free camera (non-mesh)

    var camera = new BABYLON.FreeCamera("camera1",0,0,10, new BABYLON.Vector3(0, 5, -10), scene);

    // This targets the camera to scene origin


    // This attaches the camera to the canvas

    camera.attachControl(canvas, true);

    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)

    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

    // Default intensity is 1. Let's dim the light a small amount

    light.intensity = 0.7;

    const ground = BABYLON.MeshBuilder.CreateGround("ground", {width:10, height:10});

   // BABYLON.SceneLoader.ImportMeshAsync("", "/", "city.obj");

  return scene;


Hi labris,

Thanks for the quick replay!

Ill try that!



Oh, you are creating a free camera incorrectly. It seems like you took the arc-rotate constructor and put it on top of a free camera. You can read about the universal camera (which replaced our free camera) here: Camera Introduction | Babylon.js Documentation


Oh ok! my bad! thanks for the help! its an awesome library!

‫בתאריך יום ה׳, 21 בינו׳ 2021 ב-11:56 מאת ‪Raanan Weber via Babylon.js‬‏ <‪‬‏>:‬

1 Like