Jump to content

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


En929
 Share

Recommended Posts

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>

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...