如何使用 three.js basic 显示 topojson？

Question

我想使用现有的 shapefile 并使用 three.js

对其进行拉伸

我制作了一个基本的 topojson 文件，我想用 three.js 像这样挤压它 https://threejs.org/examples/?q=shape#webgl_geometry_extrude_shapes2

shapefile 在这里...https://github.com/jamestknz/store/blob/master/house.geojson

Answer 1

我准备了一个基本的现场演示，展示了如何将 JSON 解析为 THREE.Shape 的实例。然后，您可以使用这些形状来创建 THREE.ExtrudeGeometry.

的实例

这个想法是迭代所有 feature 定义并将每个 geometry 定义解释为 THREE.Shape 的实例。代码如下所示：

function parseGEOJSON( json ) {

    const features = json.features;
    const shapes = [];

    for ( const feature of features ) {

        const coordinates = feature.geometry.coordinates;

        for ( const coordinate of coordinates ) {

            // contour

            const points = [];

            const contour = coordinate[ 0 ];

            for ( const point of contour ) {

                points.push( new THREE.Vector2( point[ 0 ], point[ 1 ] ) );

            }

            const shape = new THREE.Shape( points );

            // hole

            const hole = coordinate[ 1 ];

            if ( hole ) {

                const path = new THREE.Path();

                for ( let i = 0; i < hole.length; i ++ ) {

                    const point = hole[ i ];

                    if ( i === 0 ) {

                        path.moveTo( point[ 0 ], point[ 1 ] );

                    } else {

                        path.lineTo(  point[ 0 ], point[ 1 ] );

                    }

                }

                shape.holes.push( path );

            }

            shapes.push( shape );

        }

    }

    const geometry = new THREE.ExtrudeBufferGeometry( shapes, {
        depth: 0.1,
        bevelEnabled: false
    } );

    geometry.center();

    return geometry;

}

https://jsfiddle.net/dqfnxcuk/

three.js R108

如何使用 three.js basic 显示 topojson？

How can I display topojson with three.js basic?

json

three.js

topojson