Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

New loader for OBJ files

Temechon

By Temechon,
in Questions & Answers

 Share

Recommended Posts

Temechon Newbie

Temechon

Posted
Posted

Hey guys, 

 

We just released a new loader for Babylon.js to read OBJ (and MTL) files. This loader is now part of Babylon 2.2 (but it's working on 2.1).

As it's a loader, it is an external file that should be included in your project in you want to use it (as explained here)

 

Here is a demo: give it some time, we tried to load BIG files :) Can you guess which game these assets are coming from ?

 

I hope you will like it!

 

Cheers

Link to comment
Share on other sites
  • 7 months later...
wind Newbie

wind

Posted
Posted
On 8/13/2015 at 11:27 PM, Temechon said:

Hey guys, 

 

We just released a new loader for Babylon.js to read OBJ (and MTL) files. This loader is now part of Babylon 2.2 (but it's working on 2.1).

As it's a loader, it is an external file that should be included in your project in you want to use it (as explained here)

 

Here is a demo: give it some time, we tried to load BIG files :) Can you guess which game these assets are coming from ?

 

I hope you will like it!

 

Cheers

@Temechon : I uploaded the asset ("Bane_3.obj") to other web server (e.g. http://bayu.net23.net) and cannot load it.

If I load the asset from the DropBox, with the code below, it will work:

var bane = loader.addMeshTask("bane", "", "https://dl.dropboxusercontent.com/u/17799537/objFileLoader/Bane/", "Bane_3.obj");

But if I load the asset from the other web server (e.g. http://bayu.net23.net), with the code below, it doesn't work:

var bane = loader.addMeshTask("bane", "", "http://bayu.net23.net/objFileLoader/", "Bane_3.obj");

The whole code is below (I got it from your demo (http://www.babylonjs-playground.com/#28YUR5) ) :

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

   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>Babylon - Basic scene</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="babylon.js"></script>
    <script src="hand.js"></script>
    <script src="cannon.js"></script>  <!-- optional physics engine -->
    <script src="oimo.js"></script>
    <script src="babylon.objFileLoader.js"></script>
   </head>

   <body>
   
    <canvas id="renderCanvas"></canvas>
    
    <script>
    
// Get the canvas element from our HTML above
var canvas = document.getElementById("renderCanvas");

// Load the BABYLON 3D engine
var engine = new BABYLON.Engine(canvas, true);

// This begins the creation of a function that we will 'call' just after it's built
var createScene = function () {

    // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);

   new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 10, 0), scene);
    var cam = new BABYLON.ArcRotateCamera("ArcRotateCamera", 0, 0, 5, new BABYLON.Vector3(0, 3, 0), scene);
    cam.attachControl(canvas);

    var loader = new BABYLON.AssetsManager(scene);

    var position = -5;
    var pos = function(t) {
        t.loadedMeshes.forEach(function(m) {
            m.position.x -= position;
        });
        position += 5;
    };

    //var bane = loader.addMeshTask("bane", "", "https://dl.dropboxusercontent.com/u/17799537/objFileLoader/Bane/", "Bane_3.obj");
    var bane = loader.addMeshTask("bane", "", "http://bayu.net23.net/objFileLoader/", "Bane_3.obj");
    bane.onSuccess = pos;
    
    loader.onFinish = function() {
        engine.runRenderLoop(function () {
            scene.render();
        });
    };

    loader.load();

    return scene;

};  // End of createScene function

// Now, call the createScene function that you just finished creating
var scene = createScene();

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

How to load an OBJ file from a web server correctly?

Link to comment
Share on other sites
wind Newbie

wind

Posted
Posted
On 3/24/2016 at 9:19 PM, Deltakosh said:

Hello this sounds like an issue with MIME type.

Just try to add .obj and .mtl support in your web server

@Deltakosh : Thanks, it works... I can see the model, but I cannot see the textures, even though I have collected the textures in the same folder.

I have tried to assign a texture to all models, but I still cannot see the texture. Here is my code:

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

   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>Babylon - Basic scene</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="babylon.js"></script>
    <script src="hand.js"></script>
    <script src="cannon.js"></script>  <!-- optional physics engine -->
    <script src="oimo.js"></script>
    <script src="babylon.objFileLoader.js"></script>
   </head>

   <body>
   
    <canvas id="renderCanvas"></canvas>
    
    <script>
    
// Get the canvas element from our HTML above
var canvas = document.getElementById("renderCanvas");

// Load the BABYLON 3D engine
var engine = new BABYLON.Engine(canvas, true);

// This begins the creation of a function that we will 'call' just after it's built
var createScene = function () {

    // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);

   var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 10, 0), scene);
   light.intensity = 1;
    var cam = new BABYLON.ArcRotateCamera("ArcRotateCamera", 0, 0, 5, new BABYLON.Vector3(0, 3, 0), scene);
    cam.attachControl(canvas);

    var loader = new BABYLON.AssetsManager(scene);

    var position = -5;
    var pos = function(t) {
        t.loadedMeshes.forEach(function(m) {
            //m.position.x -= position;
            m.position = new BABYLON.Vector3(0, 0, 0);
            m.material = new BABYLON.StandardMaterial("mat", scene);
            m.material.diffuseTexture  = new BABYLON.Texture("/assets/Control_Panel.jpg", scene);
        });
        position += 5;
    };

    //var bane = loader.addMeshTask("bane", "", "https://dl.dropboxusercontent.com/u/17799537/objFileLoader/Bane/", "Bane_3.obj");
    //var bane = loader.addMeshTask("bane", "", "http://bayu.net23.net/objFileLoader/", "Bane_3.obj");
    var bane = loader.addMeshTask("bane", "", "assets/", "TestMultipleObjects.obj");
    //var bane = loader.addMeshTask("bane", "", "http://bayu.net23.net/objFileLoader/", "TestMultipleObjects.obj");
    bane.onSuccess = pos;
    
    loader.onFinish = function() {
        engine.runRenderLoop(function () {
            scene.render();
        });
    };

    loader.load();

    return scene;

};  // End of createScene function

// Now, call the createScene function that you just finished creating
var scene = createScene();

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

Do you know how to show the textures?

TextureProblem.jpg

Link to comment
Share on other sites
wind Newbie

wind

Posted
Posted
10 hours ago, Deltakosh said:

Hey!

some ideas: did you enable support for .mtl as well??

Any error in the console? 

Hi, apparently the textures didn't appear because I used wrong .htaccess... Now I can see the textures.

There is another problem, the mesh looks hard (please see the attached picture). It is not like this in 3ds Max. Is there any method in Babylon JS to soften the mesh?

HardLookedMesh.jpg

Link to comment
Share on other sites
  • 8 months later...

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
Go to topic listing

  • Recently Browsing   0 members

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