在地球仪上加载3D模型

在地球仪视图上加载自定义3D模型;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>在地球仪上加载3D模型</title>
    <meta property="og:description" content="在地球仪视图上加载自定义3D模型" />
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.js'></script>
    <script src="https://unpkg.com/@loaders.gl/core@3.4.13/dist/dist.min.js"></script>
    <script src="https://unpkg.com/@loaders.gl/obj@3.4.13/dist/dist.min.js"></script>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    const map = new maplibregl.Map({
        container: 'map',
        style: 'https://api.maptiler.com/maps/bright-v2/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
        zoom: 0,
        center: [0, 0],
        pitch: 30,
        projection: 'globe'
    });

    function getSceneDescription() {
        const modelOrigin = [0, 0];
        return [{
            type: 'gltf',
            // URL引用obj文件的路径（和材质文件）
            url: 'https://maplibre.org/maplibre-gl-js/docs/assets/model/simple-cube-color.obj',
            // 使用loader.gl解析obj文件
            loadOptions: {
                loaders: [loaders.OBJLoader],
                worker: false
            },
            scale: 500000,
            position: [modelOrigin[0], modelOrigin[1], 0],
            rotationX: 90,
            rotationY: 180,
            rotationZ: 180
        }];
    }

    map.on('load', async () => {
        map.addLayer(
            new maplibregl.ModelLayer('model-layer', getSceneDescription(), {
                id: 'model-layer'
            })
        );
    });
</script>
</body>
</html>