How to convert Geometry ElevationGrid of VRML to Aframe

Question

everyone. I have an issue in converting VRML to A-frame. VRML has the "Geometry ElevationGrid" function to set the DEM value of the texture. Instance code is as follows.

geometry ElevationGrid {
    xDimension 9
    zDimension 9
    xSpacing   1.0
    zSpacing   1.0
    solid      FALSE
    height [
        0.0, 0.0, 0.5, 1.0, 0.5, 0.0, 0.0, 0.0, 0.0,
        0.0, 0.0, 0.0, 0.0, 2.5, 0.5, 0.0, 0.0, 0.0,
        0.0, 0.0, 0.5, 0.5, 3.0, 1.0, 0.5, 0.0, 1.0,
        0.0, 0.0, 0.5, 2.0, 4.5, 2.5, 1.0, 1.5, 0.5,
        1.0, 2.5, 3.0, 4.5, 5.5, 3.5, 3.0, 1.0, 0.0,
        0.5, 2.0, 2.0, 2.5, 3.5, 4.0, 2.0, 0.5, 0.0,
        0.0, 0.0, 0.5, 1.5, 1.0, 2.0, 3.0, 1.5, 0.0,
        0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 2.0, 1.5, 0.5,
        0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.5, 0.0, 0.0,
    ]
}

I tried to convert this above VRML ElevationGrid code to Aframe. But I can't find how to do it. Please help me if anyone knows.

Answer 1

This can be done, but it is a complex topic. Aframe does not have the equivalent of an elevation grid. But aframe is simply a framework for working with THREEjs, and THREE does have way to generate a mesh from scratch, and displace its height. Explaining it is far beyond the scope of this response, but take a look at this tutorial on THREEjs fundamentals. It walks through the entire process.

https://threejsfundamentals.org/threejs/lessons/threejs-custom-geometry.html

Answer 2

Eric Eisenman (aka Sir FizX, on the AFrame slack) has written a terrain component and made it public. It uses a vertex shader, and is a very beautiful (and fast) implementation of generated terrain. Here it is on glitch. https://glitch.com/~aframe-terrain