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. 
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
lol 
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