Please guide in rendering the mesh?

[icarito]

I've tried different attempts using https://github.com/andreasplesch/aframe-triangleset-component but I get this from the Mount Fuji 256 data:

Which doesn't look to me like the input image:

Mainly because of the pointy spikes.
I'm using
<a-triangleset projectdir="z" material="roughness: 0.2; metalness: 0.3; color: green" rotation="90" position="-60 -100 30" scale="1 1 1" :vertices="this.vertices" :triangles="this.triangles"></a-triangleset>

Where this.vertices and this.triangles come from a Vue component that uses the data from tile.getMesh(80) to make these attribute data.

Please advise what am I doing wrong?
Thanks for your guidance.

[icarito]

Here's my result when using getMesh(30).

[icarito]

@andreasplesch maybe this is a question for you? ;-)
I also tried rendering with pythreejs but found similar issues.

Obviously I'm a beginner at 3D!
Thanks in advance for you kind advice.

[andreasplesch]

Please provide a live example, on glitch, jsfiddle, observable etc

[icarito]

Thanks @andreasplesch - I should've done from the beginning but I have a backend in Python3.7 that is not compatible with Glitch's older interpreter.
I've implemented a new project doing only this:
https://glitch.com/~mahogany-eggplant

My loose aim is to make a libre ("open source") videogame / interactive-experience about the Amazonian rainforest (where I live). Thank you for your nice components!

[mourner]

This is likely because the vertex data generated by this library is [x, y] pairs, without the z component (assuming the renderer will look these up through a texture). I probably need to add more docs for this, and maybe add an option to add z to the buffers too.

[andreasplesch]

Yes, the z component is expected to be provided with the x and y. It would be not too hard to inject the z value from the data into the returned vertices array with something like:

for (i=0, j=0; i<mesh.vertices.length/2; i++) {
  let  x = mesh.vertices[i*2], y = mesh.vertices[i*2+1];
  this.vertices.push(x);
  this.vertices.push(response.data[y*257+x]/100);
  this.vertices.push(y);
}

Typically, some processing has to be done anyways after the meshing, the returned x and y coordinates are just grid coordinates, not spatial coordinates.
[The up component is typically y]
[Also, I am not sure how well the component still works with current three and aframe]

[icarito]

Thanks @mourner and @andreasplesch !

That was the missing insight. I did a little tweaking to your snippet and it worked wonderfully!
Thank you both for the Library and the Component (it works fine with AFrame 0.9.2)
Here's the code and test:

https://glitch.com/~mount-fuji
https://mount-fuji.glitch.me/

@mourner Yes a little more docs would be great, I loved the demo but couldn't figure it out.

Thanks!
❤️

[arpu]

@icarito your glitch test is deleted?

[icarito]

@arpu sorry I just renamed to a more accurate name!

https://glitch.com/~mount-fuji

[arpu]

@icarito thx for poinzing me to the new glitch
but i get
three.js:11050 THREE.DirectGeometry: Faceless geometries are not supported.

and nothing is shown

[icarito]

The mesh can be seen at the bottom, I didn't center it or anything - look to the bottom left

[icarito]

bottom right I mean, sorry it's not in front of the camera