Trying to get to work in NsBasic

#1

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

#2

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:

#3

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

#4

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

#5

Thanks I’ll try that

#6

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.

#7

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

#8

Each click of the buttons show success

The error occurs at this line

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

#9

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
#10

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

#11

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

#12

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