JSON file viewer

Questions
,
1

Hi,

I like the way of displaing geometry in JSON file with the pressure value at https://threejs.org/examples/#webgl_geometry_colors_lookuptable
Is there anything like this to load and view my own JSON files for display?

Thanks
ziggy

2

The file used to load JSON in is a universal concept, just use these files in your code:


However, you do have to be careful about having the right type of JSON file. I would suggest opening your model in Blender, after installing the three.js importer/exporter, and then exporting it in the “Three.js” file format. Which should just give you a nice little JSON file. Use this as your file, then just follow along the example’s code to get the general idea.

Other Exporters:
Max
Maya
Revit

3

Note that the Detector.js file is just for testing whether a device supports WebGL, and the “type of JSON file” refers to the three.js native JSON format.

Look at the code of the example to see how this is done - specifically this function, which is where the model is loaded and the colours are set:

Also take a look at the JSON file defining the model - it defines a BufferGeometry which contains just two attributes - position, which defines the vertex positions, and pressure, which the LUT uses to set the colors.

Presumably the two attributes are the same size, and the pressure attribute specifies one pressure value per vertex, which the LUT then converts to a color.

So you’ll need two things to replicate this: A model, and a list of pressures (or other measurements) specifying one value per vertex (or per face). Once you have that, study the above code to see how this uses the LUT to convert these to colours.

4

Thanks for prompt responses. Now I see how does it work and can test it locally, but the format of JSON file is not clear to me. I exported some objects from blender using three io addon but non of them is loaded. I see that JSON file in example above is a non-idexed file where each vertex is listed three times for each triangle and there is no connectivity section. I would prefer to create JSON file with indexed geometry like the mesh from this website: http://blog.teamtreehouse.com/the-beginners-guide-to-three-js in which section called faces shows vertex connections. Is there any description of acceptable JSON file structure? I use also MeshLab which exports indexed JSON files but these are also not loaded by three.js. Any help will be appreciated.
BTW I see there are two json loaders BufferGeometryLoader and JSONLoader. I tried both but just wondering if there is any difference between them.

PS. One more note about LUT file: range of the color legend is set in main file as lut.setmin and lut.setmax to fixed values. I think it would be more convenient to set these directly from range of the attribute. It will mess up round labesls of the legend ticks but at least there will be a ful range of attribute values on the legend.

Thanks,
ziggy