My first post here…
Here’s where I’m at.
I can generate .gltf files… no prob.
My predicament - I’m slightly confused regarding adding .gltf file into my actual home page ?
I can take my Maya scene & view in SandBox… no prob.
Also within Maya 2018 , exporting using the Babylon plugin - I click “Export and Run” I can view it in a page… not prob.
Q. How to load that into my personal page ?
Note: I do have a couple of the Play Ground samples loading into my personal home page but its time to load my own creations. I tried simply following the code… and simply swapping it to load my asset. but that won;t work… I can see the loading icon loop and a blue screen after but no asset ![]()
Is there a document or video someone can point me too ?
here’s my page code
Blockquote
<title>Babylon.js sample code</title>
<!-- Babylon.js -->
<script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
<script src="https://preview.babylonjs.com/ammo.js"></script>
<script src="https://preview.babylonjs.com/cannon.js"></script>
<script src="https://preview.babylonjs.com/Oimo.js"></script>
<script src="https://preview.babylonjs.com/gltf_validator.js"></script>
<script src="https://preview.babylonjs.com/earcut.min.js"></script>
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
<script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
<script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
<script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
<script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
<script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
<!-- <script src="babylon.js"></script> -->
<!-- <script src="babylon.glTF1FileLoader.js"></script> -->
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
</head>
var canvas = document.getElementById("renderCanvas");
var delayCreateScene = function () {
// Create a scene.
var scene = new BABYLON.Scene(engine);
// Create a default skybox with an environment.
var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("textures/environment.dds", scene);
var currentSkybox = scene.createDefaultSkybox(hdrTexture, true);
// load my 3D asset (.glTF) into the scene.
BABYLON.SceneLoader.Load("scenes/", "CubeReady.babylon", engine, function (scene) {
// Create a default arc rotate camera and light.
scene.activeCamera.attachControl(canvas);
// The default camera looks at the back of the asset.
// Rotate the camera by 180 degrees to the front of the asset.
// scene.activeCamera.alpha += Math.PI;
engine.runRenderLoop(function() {
scene.render();
});
});
return scene;
};
var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
var scene = delayCreateScene();
engine.runRenderLoop(function () {
if (scene) {
scene.render();
}
});
// Resize
window.addEventListener("resize", function () {
engine.resize();
});
</script>


