Jump to content

Incorrect vertex points, import raw data from clara


Recommended Posts



I am trying to do the following, Take a model in wireframe and add new meshes to its vertices. 


I created a simple model of 2 tetrahedrons and imported it into babylon using the raw data from the export file, using setVerticesData.

It renders correctly however the next part to my project is to add meshes to each vertex point ( suppose to be 8 ),

I instead get 24 points into my array when I use the function 


In clara.io I see 8 vertices. So I am not sure why I am getting so many vertex points.

The reason why I am importing the raw data is due to the fact I do not want to use a web server for this project.

it must run off the browser in offline mode. 



see code

I also attached screenshots  from the playground

I would like to get the correct 8 vertices to add my custom meshes to it 


link to clara.io model








var createScene = function () {   var scene = new BABYLON.Scene(engine);var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 8, 50, BABYLON.Vector3.Zero(), scene);var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);camera.attachControl(canvas, true);    // Default intensity is 1. Let's dim the light a small amount    light.intensity = 0.7;var base = createBase(scene);var vertices = base.getVerticesData(BABYLON.VertexBuffer.PositionKind);createMeshAtVertices(vertices, scene)return scene;};function createBase(scene){var tet1 =  new BABYLON.Mesh("base", scene);         var tet1positions = [-0.009,0.1071,-0.01,-0.2019,0.7687,0.4279,0.473,0.7658,-0.0316,-0.2019,0.7687,0.4279,-0.009,0.1071,-0.01,-0.2622,0.7861,-0.3862,0.473,0.7658,-0.0316,-0.2019,0.7687,0.4279,-0.2622,0.7861,-0.3862,-0.009,0.1071,-0.01,0.473,0.7658,-0.0316,-0.2622,0.7861,-0.3862,0.009,-0.1271,0.0092,0.2622,-0.8054,0.3865,-0.473,-0.7857,0.0319,0.2019,-0.7894,-0.4276,-0.473,-0.7857,0.0319,0.2622,-0.8054,0.3865,0.2019,-0.7894,-0.4276,0.2622,-0.8054,0.3865,0.009,-0.1271,0.0092,0.2019,-0.7894,-0.4276,0.009,-0.1271,0.0092,-0.473,-0.7857,0.0319];var tet1normals = [0.5243,-0.3584,0.7725,0.5243,-0.3584,0.7725,0.5243,-0.3584,0.7725,-0.9461,-0.3177,0.0632,-0.9461,-0.3177,0.0632,-0.9461,-0.3177,0.0632,0.018,0.9996,0.02,0.018,0.9996,0.02,0.018,0.9996,0.02,0.4038,-0.3236,-0.8557,0.4038,-0.3236,-0.8557,0.4038,-0.3236,-0.8557,-0.4038,0.3249,0.8552,-0.4038,0.3249,0.8552,-0.4038,0.3249,0.8552,-0.0179,-0.9997,-0.0184,-0.0179,-0.9997,-0.0184,-0.0179,-0.9997,-0.0184,0.9461,0.3177,-0.0637,0.9461,0.3177,-0.0637,0.9461,0.3177,-0.0637,-0.5243,0.3571,-0.773,-0.5243,0.3571,-0.773,-0.5243,0.3571,-0.7734];var tet1uvs = [0.375,0.6959,0.875,0.6959,0.625,0.3041,0.875,0.6959,0.375,0.6959,0.125,0.3041,0.625,0.3041,0.875,0.6959,0.125,0.3041,0.375,0.6959,0.625,0.3041,0.125,0.3041,0.625,0.3041,0.875,0.6959,0.375,0.6959,0.125,0.3041,0.375,0.6959,0.875,0.6959,0.125,0.3041,0.875,0.6959,0.625,0.3041,0.125,0.3041,0.625,0.3041,0.375,0.6959];var indices = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23];tet1.setVerticesData(BABYLON.VertexBuffer.PositionKind, tet1positions,  true);tet1.setVerticesData(BABYLON.VertexBuffer.NormalKind, tet1normals, true);tet1.setVerticesData(BABYLON.VertexBuffer.UVKind, tet1uvs, true);tet1.setIndices(indices);var material = new BABYLON.StandardMaterial("pyshical", scene);material.wireframe = true;material.diffuseColor = BABYLON.Color3.White();material.specularColor = BABYLON.Color3.White();material.emissiveColor = BABYLON.Color3.Blue();tet1.material = material;tet1.scaling = new BABYLON.Vector3(15, 15, 15);tet1.rotation.z = -0.4;tet1.rotation.y = 2.5;tet1.rotation.x = 2.6;tet1.bakeCurrentTransformIntoVertices();return tet1;};function createMeshAtVertices(vertices, scene) {var stype = 0;var shape;for (var i = 0; i < vertices.length / 3; i++ ){if(stype == 5)stype = 0;shape = BABYLON.Mesh.CreatePolyhedron("pyshical", { type: stype, size:0.5 }, scene);    shape.position = BABYLON.Vector3.FromArray(vertices, i);shape.scaling = new BABYLON.Vector3(1, 1, 1);stype++;}};




Link to comment
Share on other sites

Hi JohnK


here is the babylon playground link



as you can see there are alot of meshes floating outside the base mesh.

Im using verticesdata to get each point so theoretically all new meshes should be all  within the base mesh.


another slight hicup as I continue to work on this project

To get the orientation correct, I transformed the base mesh using rotation 

tet1.rotation.z = -0.4;tet1.rotation.y = 2.5;tet1.rotation.x = 2.6;tet1.bakeCurrentTransformIntoVertices();

now when I want to add in some animation using scene.beforeRender

its taking the above into its calculation which is not the desired results.

Once I orientate the base I just want it to spin along its y axis. 

If I remove the above code it spins properly but the orientation is off .



Link to comment
Share on other sites

Is this what you want http://www.babylonjs-playground.com/#2AXMQX#1


you vertices array has the form [x0,y0,z0,x1,y1,z1,......] and so

BABYLON.Vector3.FromArray(vertices, 0); is constructed from x0,y0,z0BABYLON.Vector3.FromArray(vertices, 1); is constructed from y0,z0,x1BABYLON.Vector3.FromArray(vertices, 2); is constructed from z0,x1,y1BABYLON.Vector3.FromArray(vertices, 3); is constructed from x1,y1,z1etc

I have changed your loop on line 64 and the fromArray on line 68 to work in groups of three to read the x, y, and z coordinates of each vertex.

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