Can't get skull rotator (playground) to work with GLTF model


I’m new to Babylon coming from Three.js. I’m not new to Javascript and have some experience and can get most things working. However I found this Playground example - … and wanted to load my own GLTF model. However it just shows off in the distance (I think its just a lot smaller than the skull) however it NEVER rotates. There are no errors shown. The Javascript (see below) is identical apart from the model name and mesh name “Cube” which I checked by looking at the GLTF file to check the name.

Is there something else I need to do here ?

Download all files here:

<!DOCTYPE html>
<html xmlns="">

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Babylon Template</title>

            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;

        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>

    <canvas id="renderCanvas" touch-action="none"></canvas> <!-- touch-action="none" for best results from PEP -->

        var canvas = document.getElementById("renderCanvas"); // Get the canvas element
        var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        /******* Add the create scene function ******/
var createScene = function () {
    var scene = new BABYLON.Scene(engine);

    //Adding a light
    var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);

    //Adding an Arc Rotate Camera
    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, false);

    // The first parameter can be used to specify which mesh to import. Here we import all meshes
    BABYLON.SceneLoader.ImportMesh("", "./", "cube_map.gltf", scene, function (newMeshes) {
        // Set the target of the camera to the first imported mesh = newMeshes[0];
		// alert(newMeshes[0].name);

	    // Move the light with the camera
	    scene.registerBeforeRender(function () {
	        light.position = camera.position;
			scene.getMeshByName("Cube").rotation.y += 0.05;

    return scene;
        /******* End of the create scene function ******/

        var scene = createScene(); //Call the createScene function

        // Register a render loop to repeatedly render the scene
        engine.runRenderLoop(function () {

        // Watch for browser/canvas resize events
        window.addEventListener("resize", function () {



The meshes loaded from a .gltf file use the rotationQuaternion property instead of rotation.

If you want to switch to using rotation instead, use:

scene.getMeshByName("Cube").rotationQuaternion = null;

By default, your camera is far from your object, that’s why it appears small on the screen.

You can use scene.createDefaultCamera(true, true, true); in the ImportMesh callback to set a camera that will display your mesh with a good size on the screen.


Thanks !

(wow, I’d forgotten about Captain Caveman … until now !)

For anyone else the full statement needed is …

scene.getMeshByName("Cube").rotationQuaternion = null;
scene.getMeshByName("Cube").rotation.y += 0.005;

So is there a way to make Babylon spit out more verbose logging / error messages ? If it had said something about finding the wrong rotation type then I might have caught on.

There’s no warning outputted by Babylonjs but a note in the loader doc:

Note: Since meshes you import can have a rotationQuaternion set applying a rotation to one will have unforeseen consequences as detailed in this warning.

1 Like

Thanks. Here is the final project (still some development going on with it).