Jump to content

I can't get the WorldSpaceCanvas2D to work


Recommended Posts

I keep getting the console error "o._cacheNode.getInnerPosToRef is not a function".

I just want to get it into the scene for now but I can't get it to show. I may be missing something obvious:

var mainCanvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(mainCanvas, true);

var createScene = function () {

    // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);

    // This creates and positions a free camera (non-mesh)
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
    camera.attachControl(mainCanvas, true);

    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
    var text2d = new BABYLON.Text2D("A", { fontName: "24pt Arial", marginAlignment: "h: center, v: bottom", fontSuperSample: true });

    var canvas = new BABYLON.WorldSpaceCanvas2D(scene, new BABYLON.Size(150, 150), {
        id: "WorldSpaceCanvas",
        worldPosition: new BABYLON.Vector3(0, 0, 0),
        enableInteraction: true,
        backgroundFill: "#C0C0C040",
        backgroundRoundRadius: 20,
        children: [

    var box1 = BABYLON.Mesh.CreateBox("Box1", 2.0, scene);
    var materialBox = new BABYLON.StandardMaterial("texture1", scene);
    materialBox.diffuseColor = new BABYLON.Color3(0, 1, 0);//Green
    box1.material = materialBox;

    var animationBox = new BABYLON.Animation("boxAnimation", "position.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
    // Animation keys
    var keys = [];
        frame: 0,
        value: 20

        frame: 60,
        value: -10



    scene.beginAnimation(box1, 0, 100, true);

    return scene;


var scene = createScene();

engine.runRenderLoop(function () {

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


Link to comment
Share on other sites

Ohhh, I thought you were having an issue with making the worldSpaceCanvas2D "show".  Ok, there's some loaders failing in the same scene?  And you think the loading problem is caused by the canvas2D system?  When you remove it, mesh loading works fine?  More details, please.  thx.

Using latest BJS and latest Canvas2D extension?  *nod*  hmm.  Thinkin'.

Link to comment
Share on other sites

@Wingnut Basically the playground you linked but without the WorldSpaceCanvas2D works fine but adding it shows the console error "o._cacheNode.getInnerPosToRef is not a function" and the scene doesn't load. The code that I added in my first post was all the code I'm using. Sorry if this isn't helpful.

Link to comment
Share on other sites

Ahh, ok, thanks for extra info.  Just off the top of my head, I'd say play with versions-changing (perhaps for both Canvas2d AND BJS). 

Canvas2D system is not within the 'extensions' repository anymore.  I think it still IS one (needs adding via another <script> element). 

But, I'mnot sure... I hardly ever do home projects. I work, mostly, in the playground.

Here's the absolute latest... https://github.com/BabylonJS/Babylon.js/tree/master/dist/preview release/canvas2D

Still two calls to .getInnerPosToRef in there... so... maybe I'm grasping at straws.  Could be a bug, I suppose.

Let's ping @Nockawa and see if he has any advice/words.  He's been a little off-forum busy, lately, I suspect, but maybe he'll stop-by.

Sorry that I have no solution, yet.  I'll keep thinkin' and you keep experimentin', ok?  Tell us... if you discover information about this, thx.

Link to comment
Share on other sites

  • 2 weeks later...

Hello People,

Sorry for the delay, I was on a two weeks roadtrip visiting a small part of @Wingnut's country (mostly west coast national parks) and I didn't have 1 minute for me the whole time!

@MacSkelly can you please confirm or try with the latest preview of bjs and c2d that you will find here and tell me if you still have the issue... Look like you're in a case where the node's not ready and my code is assuming it is!


Link to comment
Share on other sites

  • 1 month later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...