Trying to get to work in NsBasic

Hi Guys,

http://toolfolks.com/babylon1/

I have added the js-3d-model-viewer.js file to the project
I Have added a container with ID viewer
I have added the assets folder with sample.obj

When I run the I do not get any errors in the console but the model does not show.

What am I missing here please.

Cheers

Steve Warby

Hi

http://toolfolks.com/babylon1/js-3d-model-viewer.js

Your model viewer is using ThreeJS webGL library.

THIS forum is for/about BabylonJS webGL library.

I’m not sure we can be of any help. :frowning:

Sorry,

it was late…

I have tried to follow this tutorial and get it to work in NSBasic.

https://doc.babylonjs.com ( the getting started project )

I have created the there js files and dragged them into my project. ( this includes the js files )
babylon.js
onjs.loaders.min.js
pep.js

Added a container id = renderCanvas

I put the code on the Form1 on show event ( Is this correct ? )


Form1.onshow=function(){
        // get the canvas DOM element
            var canvas = document.getElementById('renderCanvas');

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

            // createScene function that creates and return the scene
            var createScene = function(){
                // create a basic BJS Scene object
                var scene = new BABYLON.Scene(engine);

                // create a FreeCamera, and set its position to (x:0, y:5, z:-10)
                var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);

                // target the camera to scene origin
                camera.setTarget(BABYLON.Vector3.Zero());

                // attach the camera to the canvas
                camera.attachControl(canvas, false);

                // create a basic light, aiming 0,1,0 - meaning, to the sky
                var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);

                // create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation 
                var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);

                // move the sphere upward 1/2 of its height
                sphere.position.y = 1;

                // create a built-in "ground" shape;
                var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);

                // return the created scene
                return scene;
            }

            // call the createScene function
            var scene = createScene();

            // run the render loop
            engine.runRenderLoop(function(){
                scene.render();
            });

            // the canvas/window resize event handler
            window.addEventListener('resize', function(){
                engine.resize();
            });
}

When I run it I am getting some errors.

http://toolfolks.com/babylon3/

Any ideas where I am going wrong here ?

Cheers
Steve Warby

You need a canvasElement and not a div for the renderCanvas.

Thanks I’ll try that

I added an image and gave that the ID renderCanvas.

I have removed the .js files and added this to the header files.

<script src="https://preview.babylonjs.com/babylon.js"></script>
    <!-- Link to the last version of BabylonJS loaders to enable loading filetypes such as .gltf -->
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <!-- Link to pep.js to ensure pointer events work consistently in all browsers -->
    <script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>

I still get the same error.

Does this mean the library is not loaded ? How do I rectify this

TypeError: this._gl.getContextAttributes is not a function. (In ‘this._gl.getContextAttributes()’, ‘this._gl.getContextAttributes’ is undefined)

I added a button to run the code to ensure time for the library to load but still same problem.

Thank sebavan,

I’m following the gestated code here:
https://doc.babylonjs.com/#getting-started

I have removed everything from the extra headers and changed the code to:



      
doSomeInitWork=function(){
        // get the canvas DOM element
            var canvas = document.getElementById('renderCanvas');

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

            // createScene function that creates and return the scene
            var createScene = function(){
                // create a basic BJS Scene object
                var scene = new BABYLON.Scene(engine);

                // create a FreeCamera, and set its position to (x:0, y:5, z:-10)
                var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);

                // target the camera to scene origin
                camera.setTarget(BABYLON.Vector3.Zero());

                // attach the camera to the canvas
                camera.attachControl(canvas, false);

                // create a basic light, aiming 0,1,0 - meaning, to the sky
                var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);

                // create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation 
                var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);

                // move the sphere upward 1/2 of its height
                sphere.position.y = 1;

                // create a built-in "ground" shape;
                var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);

                // return the created scene
                return scene;
            }

            // call the createScene function
            var scene = createScene();

            // run the render loop
            engine.runRenderLoop(function(){
                scene.render();
            });

            // the canvas/window resize event handler
            window.addEventListener('resize', function(){
                engine.resize();
            });
}



btnGetBabylonJS.onclick=function(){
    $.getScript("https://preview.babylonjs.com/babylon.js", function( data, textStatus, jqxhr) {
  console.log( data ); // Data returned
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
  console.log( "Load was performed." );
});  
}

btngetBabylonLoader.onclick=function(){
    $.getScript( "https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js", function( data, textStatus, jqxhr ) {
  console.log( data ); // Data returned
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
  console.log( "Load was performed." );
});
}

btnGetPepJS.onclick=function(){
   $.getScript( "https://code.jquery.com/pep/0.4.1/pep.js", function( data, textStatus, jqxhr ) {
  console.log( data ); // Data returned
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
  console.log( "Load was performed." );
}); 
}

btnRunCode.onclick=function(){
    doSomeInitWork();
}

but I still get the error

TypeError: this._gl.getContextAttributes is not a function. (In 'this._gl.getContextAttributes()', 'this._gl.getContextAttributes' is undefined)

// link as above

Cheers

Steve Warburton

Each click of the buttons show success

The error occurs at this line

var engine = new BABYLON.Engine(canvas, true);

Hi guys,

The element I was using was an image component when I used pictureBox( a canvas element ) it worked…

http://toolfolks.com/babylon3/

If only the error message was something like

You idiot the component you set to renderCanvas is not a canvas element

Cheers

Steve Warby

1 Like

lol :slight_smile: thanks for the feedback and congrats!!

I have adapted the above code and add my own 3D model into the scene.

var scene;
var engine;
      
doSomeInitWork=function(){
        // get the canvas DOM element
            var canvas = document.getElementById('renderCanvas');

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

            // createScene function that creates and return the scene
            var createScene = function(){
                // create a basic BJS Scene object
                scene = new BABYLON.Scene(engine);

                // create a FreeCamera, and set its position to (x:0, y:5, z:-10)
                //var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);
                // var box = BABYLON.Mesh.CreateBox('Box',1,0,scene);
                var box = BABYLON.SceneLoader.Append("", "models/ogJoineryVan.glb", scene, function (scene) {
    // do something with the scene
});
                 var camera = new BABYLON.ArcRotateCamera('arcCamera1', 
                 BABYLON.Tools.ToRadians(45),
                 BABYLON.Tools.ToRadians(45),
                 10.0,box.position, scene);
                // target the camera to scene origin
                camera.setTarget(BABYLON.Vector3.Zero());

                // attach the camera to the canvas
                camera.attachControl(canvas, false);

                // create a basic light, aiming 0,1,0 - meaning, to the sky
                var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);

                // create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation 
               // var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);

                // move the sphere upward 1/2 of its height
                //sphere.position.y = 1;

                // create a built-in "ground" shape;
                var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);

                // return the created scene
                return scene;
            }

            // call the createScene function
            var scene = createScene();

            // run the render loop
            engine.runRenderLoop(function(){
                scene.render();
            });

            // the canvas/window resize event handler
            window.addEventListener('resize', function(){
                engine.resize();
            });
}

You can view at ny web page
http://toolfolks.com/babylon3/

Works on PC, Mac web browsers, Android chrome.

However when I compile to android I see the player but not my model.

If I use

var box = BABYLON.Mesh.CreateBox('Box',1,0,scene);

instead of my model I see the box.

What am I doing wrong here ?

Cheers

Steve Warby

Well this seems to work well (at least on desktop and on my pixel3)

can you try to remote debug on your phone to check what could be wrong>?

I edited your post to add the direct link