Jump to content

Making a 3js model importer


Recommended Posts

I am trying to make a simple 3js importer. Using the simplest object I have which is a box I tried using the online example someone had give me. 

Just including the model as a script makes the job much simpler. No async issues. 

The only alteration to the 3js file is to add var name of the model

var FortyFtContainer= 

Later I figured I could pull out the names of the material and add them

This is the rough start but I cant get the point order right. 


I have tired to use the original faces point ordering and then tried to swap them as was done in a prior example. 

Any of you much smater guys have some ideas?

Link to comment
Share on other sites

If I can attache the UV material to it. Cant even get a material to show up on the cube. 

I tried online and here and the nothing happens. No image texture. Online I dont even get a cube anymore. 

Not sure the texture is there. I just took the address from another online example

    var mat = new BABYLON.StandardMaterial("texture1", scene);
    mat.diffuseTexture = new BABYLON.Texture("textures/tree.png", scene);
    mat.diffuseTexture.hasAlpha = true;//Have an alpha
    mat.backFaceCulling = false;//Show all the faces of the element
      //   var mat = new BABYLON.StandardMaterial("mat1", scene);
        mat.alpha = 1.0;
      //  mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
     //   mat.freeze()
        Container.material = mat;


http://www.babylonjs-playground.com/#UDUFX#23  works



When the loader is done with textures I am hoping that the performance stays here are 24000 as particles


Link to comment
Share on other sites

I saw this work on my phone but at work it was not showing up on my monitor. And the other larger image I had did not show up at all. Its 1K x 1K .

So do you know anything about how to map multiple UV materials to the Mesh Object? From what you can see of the 3js file there isn't much inside. I loaded a pretty large mesh and it worked well but there is a HUGE part missing the UV mapped material. 

I am only vaguely familiar with this level of detail.

vertices are the actual points on a mesh. 

indices/faces are needed to reduce the number vertices defined and point to vertices that make triangles to make the mesh.  

UV is the percent of the texture to be mapped to some vertices of a mesh. 

From the documentation I gather you have submeshs that are tied to vertices that can map to a material. 

I cant comprehend how that works with indices. Unless the vertex array can be an indices array?

Somehow the docs and what I have are not gelling in my brain. 

Any pointers would be great. 

Thanks all. 

And thanks for the patience. 


Link to comment
Share on other sites

If it works on your phone then you may have a cache/network issue at work.

Regarding how meshes are build.

Vertices are defined by several buffers.

Only two are mandatory:

  • positions: the list of positions (x, y, z). The minimal amount is 3 as you cannot define something smaller than a triangle
  • indices: The index of positions to use to create faces. A face is made of 3 positions. So the minimal amount of indices is 3


Here is then the most basic mesh you can create:

"positions": [0, 0, 0,
			 0, 1, 0,
			1, 0, 0],

"faces": [0, 1, 2]

Then you can add more information per vertex. For instance every vertex can also have a normal to compute dynamic lightning.

And you can add UVs to texture image on your object. UVs are 2D coordinates attached to every position. They are in the range of [0,0] to [1,1]. They represent a coordinate on a texture.

With that in mind here is a more complete mesh (Still a triangle):

"positions": [0, 0, 0,
			 0, 1, 0,
			1, 0, 0],

"normals": [0.0, 1.0,
			0.0, 1.0,
			0.0, 1.0],

"uvs": [0, 0,
		0, 1,
		1, 0],

"faces": [0, 1, 2]

So what to do to get a plane?

Just add one position, one normal, one UV and a new face (so 3 indices):

"positions": [0, 0, 0,
			 0, 1, 0,
			1, 0, 0,
            1, 1, 0],

"normals": [0.0, 1.0,
			0.0, 1.0,
			0.0, 1.0,
            0.0, 1.0],

"uvs": [0, 0,
		0, 1,
		1, 0,
        1, 1],

"faces": [0, 1, 2,
          0, 2, 3]


Link to comment
Share on other sites

How is the face indices linked to an indexed material list.

Suppose a Model has one mesh but two materials UV mapped.

How do you link those materials to the Babylon Mesh to the faces? 

So you create a MultiMaterial like this. And push on each material into the list. 

var multimat = new BABYLON.MultiMaterial("multi", scene);

What I am trying to understand, using your example is how face 0,1,2 links to material0  and face 0,2,3 links to material 1 

From an online example they had something like this. And this means that each material must have a linear list of indices for that material. 

I am getting the drift here and will work on this.  In the mean time I am uploading the material for the container can you place it someplace for use in the playground?

This way I might be able to tell whats wrong on my side which still doesn't work

sphere.subMeshes.push(new BABYLON.SubMesh(0, 0, verticesCount, 0, 900, sphere));
sphere.subMeshes.push(new BABYLON.SubMesh(1, 0, verticesCount, 900, 900, sphere));


Link to comment
Share on other sites

To adapt multi material to my example, I would write:

mesh.subMeshes = [];
mesh.subMeshes.push(new BABYLON.SubMesh(0, 0, 6, 0, 1, mesh));
mesh.subMeshes.push(new BABYLON.SubMesh(1, 0, 6, 1, 1, mesh));

So basically a submesh is defined by:

constructor(public materialIndex: number, public verticesStart: number, public verticesCount: number, public indexStart, public indexCount: number, mesh: AbstractMesh)


Link to comment
Share on other sites

Are you sure thats right BABYLON.SubMesh(0,0,6,0,1,mesh)

0 is he material index Got it. 

But 6 verticesCount

I dont understand 6 vertices Isn't that the indicies count? There are only 4 vertices for a plane

and a box has 8 vertices. 

There are 2 faces/triangles so 0,1  

1,1 are the number of complete faces/triangles in the submesh

Still dont understand the 6 unless that is the raw vertexes represented by the indicies.  


Here is the modified version. I tired it with a version that had 5 UV maps and got only one to work. 



Link to comment
Share on other sites

I mean with simple coordinates..like 0, 1 :) "

OOOOh... I will work on that. Currently trying to finish the proof of concept to work which leads me to my second item.. 

"But by the way I see that your files comes from 3dsmax. Why not using our exporter then?"

Currently I cant get the time from our 3D guys to redo the models I have. 

So I have turned this into mental exercise. I am not sure I needed to re- remember all this but hey.. 
The UVS are my last struggle looking at older examples and documentation to get this done. 


Link to comment
Share on other sites

Is there any info on how the uvs correlate to the vertexes/faces?

In your example above for a simple plane there are 2  triangles and 4 vertices and 4

UV pairs. The UV pairs are tied to ? 

"uvs": [0, 0, 0, 1, 1, 0, 1, 1],

What I am trying to understand is for a box there are 6 square faces so 24 UV pairs

and 12 faces and only 8 vertices. 

So how does Babylon join UV pairs to this group?

What is it expecting? In what order. 

I will try to draw something up on paper and this last clue should help me finish this code. 



Link to comment
Share on other sites

Want to be 100% clear.

You are talking positions not indices.  Funny to conserve space they wouldn't have a uv indicie group. Alrightie then.  Can add positions to make this work.

I experimented a bit and its not working. I created 4 vertex faces after the top and bottom were vertexes were defined. That would be the first 8 positions. 

next for is the right side, etc. I set them all to uv 0,0 1,0  0,1 1,1 


I put in 48 vertices. Each vertex has a UV value pair for the six faces. 


Link to comment
Share on other sites

Not sure whether the post from me from a previous topic sheds any light on what you are trying to achieve or not but it might be worth a look.



I used the playground to create two Cubes, one uses your CreatePolyhedron method and one the new CreateBox method. Checking the VertexData for both shows the difference.

In the CreateBox method there are 24 positions and 24 normals, since each of the 8 vertices is listed 3 times; once for each face it belongs to and each of the 6 normals (one per face) is listed 4 times once for each vertex on that face. The UVs are also listed 24 times each one matched in 1-1 correspondence with the positions.

In the CreatePolyhedron method there are 8 positions and 8 normals one for each of the 8 vertices. The normals are now not normal to a face but are formed from the 3 face normals at each vertex. This method of storing the VertexData is more efficient since it uses a third less memory but does not contain sufficient data for the uvs to be applied.

http://www.babylonjs-playground.com/#1H7L5C#29 shows the two cubes and the normals at the vertices. The lower one is made using the CreateBox method and all faces contain the image in a proper way.

Interestingly the use of .convertToFlatShadedMesh(); produces 36 positions since it creates two facets per face and then 4 vertices belong to 6 facets and 4 vertices belong to 4 facets and there are 36 normals. The UV array also has 36 entries but I presume they do not now match correctly the positions.

Remove the comment from line 70 in the playground above and see the difference.


This was the topic


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.

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.


  • Recently Browsing   0 members

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