MAYA related - How to view .gltf in a .html page - work flow?

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 :frowning:

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>

I’ve made an example in the Blender to gltf page, this can help: Blender to glTF - Babylon.js Documentation

Hi & thanks for the speedy reply…

I looked over the Blender example & I copied the html file and then simply swapped out the .gltf for mine but still nothing

Blockquote BABYLON.SceneLoader.Load(“scenes”,“CubeReady.gltf”, engine, function (scene) {

        var camera = new BABYLON.ArcRotateCamera("Camera", 1, 1, 4, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, false);

it shows as loading and then all is white… :neutral_face:

you mentioned keeping it local… A security issue in Chrome…
What do you mean by this ?

I am using FIleZilla to upload to hosting on GoDaddy. Viewing in Chrome… I tried Explorer as well wit no luck :frowning:

Starting to wonder if its at Maya end… the export plugin ? but it does show up with “export and run”.

Do you run your BJS app into a local webserver? (easy to do with softwares like Easyphp or Wamp for example).

OK I found the issue
There was an “s” in http(s): Simply remove the S and all is now fine.

model url=“http://mysite.com/scenes/3DCube.gltf

Which in retrospect means mysite is not secure…

1 Like