Please guide in rendering the mesh?
icarito opened this issue · 20 comments
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.
Here's my result when using getMesh(30).
@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.
Please provide a live example, on glitch, jsfiddle, observable etc
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!
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.
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]
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!
❤️
@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
The mesh can be seen at the bottom, I didn't center it or anything - look to the bottom left
bottom right I mean, sorry it's not in front of the camera
ahh :> thx, great example!
Let's reopen the issue until we have a proper demo / better docs.
@mourner testing with aframe master and THREEjs v108 and BufferGeometry
https://codesandbox.io/s/aframe-draco-gltf-model-plus-77rld
@mourner what to you think on return the indices on getMesh ?
than the BufferGeometry could be set with setIndex()
https://threejs.org/docs/#api/en/core/BufferGeometry.setIndex
awsome works! i update the codepen on https://codesandbox.io/s/martini-aframe-8b2i8
update the link!
@mourner one more question how can set the createTile with a BufferGeometry?
the idea is bevore i use Martini i use
var geometry = new THREE.Geometry().fromBufferGeometry(this.groundGeometry);
geometry.mergeVertices();
var modifier = new THREE.SubdivisionModifier(1);
var smoothGeometry = modifier.modify(geometry);
if (this.groundGeometry) this.groundGeometry.dispose();
this.groundGeometry = new THREE.BufferGeometry().fromGeometry(smoothGeometry);
to get a smoother Terrain bevore Martini