[HELP] Scene.Render is not a Function

Questions
1

I’m really new to this library and I won’t have time to understand it because I’ll have to get it done by Wednesday. I’ll have this code which I copied from babylon playground but it doesn’t work on local environment. Could anyone help me with that? THX.

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

    <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 loadFileAsync = function (url) {
        return new Promise(function (resolve, reject) {
            BABYLON.Tools.LoadFile(url, function (data) {
                resolve(data);
            }, undefined, undefined, true, function (request, exception) {
                reject(exception);
            });
        });
    };
    
    var createScene = async function () {
        var scene = new BABYLON.Scene(engine);
        scene.useRightHandedSystem = true;
    
        BABYLON.DracoCompression.Configuration = {
            decoder: {
                wasmUrl: "https://cdn.jsdelivr.net/gh/google/draco/javascript/draco_decoder.js",
                wasmBinaryUrl: "https://cdn.jsdelivr.net/gh/google/draco/javascript/draco_decoder.wasm",
                fallbackUrl: "https://cdn.jsdelivr.net/gh/google/draco/javascript/draco_wasm_wrapper.js",
            }
        };
        
        var dracoCompression = new BABYLON.DracoCompression(1);
        var url = "https://raw.githubusercontent.com/vitorkrau/tecgraf/master/assets/out7.drc";
        return loadFileAsync(url).then(function (data) {
            return dracoCompression.decodeMeshAsync(data);
        }).then(function (vertexData) {
            var mesh = new BABYLON.Mesh("dracoMesh", scene);
            var geometry = new BABYLON.Geometry("dracoGeometry", scene, vertexData);
            geometry.applyToMesh(mesh);
    
            mesh.material = new BABYLON.PBRMaterial("material", scene);
            mesh.material.sideOrientation = BABYLON.Material.CounterClockWiseSideOrientation;
            mesh.material.metallic = 0;
    
            scene.createDefaultCameraOrLight(true, true, true);
            scene.activeCamera.alpha += Math.PI;
            return scene;
        });
    };
    
    var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
    var scene = createScene();

    engine.runRenderLoop(function () {
        if (scene) {
            scene.render();
        }
    });

    // Resize
    window.addEventListener("resize", function () {
        engine.resize();
    });
</script>
2

Which playground example is this from? I may be able to help here.

3

https://playground.babylonjs.com/#22MFU2#7

I just downloaded the sample file and paste the code in vs code.

4

Try changing scene.render();
To this.scene.render();

I’m currently away from dev machine but this looks to be the reason it’s not working locally - I may be wrong.

5

Same error…

6

Maybe async error, engine renderloop is started before a scene has been returned?

7

Yes, definetly this.
You can try

var scene = await createScene();

or something like

scene.then(()=>{
	engine.runRenderLoop(function () {
		if (scene) {
			scene.render();
		}
	});
})
1 Like
8

It works! Thanks!!!