How do I add my animated mesh? And what's with Dude.babylon

En929 · June 12, 2017

I tried to use the code below to add my animated mesh, but I don't know how. The code below is based on the "Instanced Bones " example on the playground. The part that I'm trouble with is this part here:

BABYLON.SceneLoader.ImportMesh("him", "scenes/Dude/", "Dude.babylon", scene, function (newMeshes2, particleSystems2, skeletons2) {
var dude = newMeshes2[0];

dude.rotation.y = Math.PI;
dude.position = new BABYLON.Vector3(0, 0, -80);

scene.beginAnimation(skeletons2[0], 0, 100, true, 1.0);
});

The questions that I have are:

1. I downloaded the "instanced bones" example to my desktop, but I don't see the mesh appearing in my browser at all even though I ran it as is directly after downloading it. It seems to work fine in the playground, but not on my Desktop.

2. Let's say that I wanted to add an animated mesh who's name is "Jay.fbx." How would I add my mesh using the code above if I was running things from my desktop? What's the proper way to write it?

The completed code that I was planning to run on my desktop is below for reference.

Thanks

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Babylon.js sample code</title>
        <!-- Babylon.js -->
        <script src="http://www.babylonjs.com/hand.minified-1.2.js"></script>
        <script src="http://www.babylonjs.com/cannon.js"></script>
        <script src="http://www.babylonjs.com/oimo.js"></script>
        <script src="http://www.babylonjs.com/babylon.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>
<body>
    <div id="canvasZone">
        <canvas id="renderCanvas"></canvas>
    </div>
    <script>
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);

        var createScene = function () {
            var scene = new BABYLON.Scene(engine);
            var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(0, -0.5, -1.0), scene);
            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 30, 0), scene);
            
            camera.attachControl(canvas, false);
            camera.setPosition(new BABYLON.Vector3(20, 70, 120));
            light.position = new BABYLON.Vector3(50, 250, 200);
        	light.shadowOrthoScale = 2.0;
            camera.minZ = 1.0;
        
            scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3);
        
            // Ground
            var ground = BABYLON.Mesh.CreateGround("ground", 100, 100, 1, scene, false);
            var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
            groundMaterial.diffuseColor = new BABYLON.Color3(0.2, 0.2, 0.2);
            groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
            ground.material = groundMaterial;
            ground.receiveShadows = true;
        
            // Shadows
            var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
            shadowGenerator.useBlurVarianceShadowMap = true;
        
            // Dude
            BABYLON.SceneLoader.ImportMesh("him", "scenes/Dude/", "Dude.babylon", scene, function (newMeshes2, particleSystems2, skeletons2) {
                var dude = newMeshes2[0];
        
 
                dude.rotation.y = Math.PI;
                dude.position = new BABYLON.Vector3(0, 0, -80);
        
                scene.beginAnimation(skeletons2[0], 0, 100, true, 1.0);
            });
        
            return scene;
        };
        
        var scene = createScene();

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

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

Nesh108 · June 12, 2017

Hey @En929, can you open the Network tab and see if there any file not being properly loaded? How about the console itself? Any error?

For number 2, I'd say to use an exporter and convert it into a .babylon file, much easier to work with and usually very light. More info at: https://github.com/BabylonJS/Babylon.js/tree/master/Exporters/FBX

aWeirdo · June 12, 2017

To load files locally it must run on a web server, e.g. xampp https://www.apachefriends.org/index.html

This is a browser security feature to avoid websites directly accessing your file system
it wouldn't be very enjoyable if any website could just download your entire harddrive

Sign In

How do I add my animated mesh? And what's with Dude.babylon

Recommended Posts

En929

Link to comment

Share on other sites

Nesh108

Link to comment

Share on other sites

aWeirdo

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity