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

Questions
1

Hi,

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 - https://playground.babylonjs.com/#NCF3T#5 … 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: http://files.michaelzfreeman.org/babylonjs-skull-example.zip

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

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

        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>

        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
        <script src="https://cdn.babylonjs.com/loaders/babylon.glTFFileLoader.js"></script>
        <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    </head>
<body>

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

    <script>
        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
        camera.target = 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 () {
                scene.render();
        });

        // Watch for browser/canvas resize events
        window.addEventListener("resize", function () {
                engine.resize();
        });
    </script>

   </body>

</html>
2

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.

2 Likes
3

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.

4

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
5

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