mapbox gl 加载gltf模型

最新推荐文章于 2024-04-22 16:44:01 发布

荣默默

最新推荐文章于 2024-04-22 16:44:01 发布

阅读量2.5k

点赞数 2

文章标签： javascript html webgl

本文链接：https://blog.csdn.net/rt2016/article/details/111567359

版权

本文介绍了如何使用Mapbox GL加载gltf模型，包括需要引入的JavaScript插件，解决本地路径问题，以及gltf模型文件结构的注意事项。同时提到了在Vue项目中加载模型的特定要求，并期望读者分享关于gltf模型点击事件的实现建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先得理解gltf文件就是一个json文件，GLTF代表Graphics Language Transmission Format（图形语言传输格式），描述的是三维场景数据的组成和构造。

1.引入mapbox gl的sdk，另外也得引入

<script src="js/three.min.js"></script> <script src="js/GLTFLoader.js"></script>

这两个js插件，废话不多说，直接上代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Add a 3D model</title>
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js"></script>
        <link href="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css" rel="stylesheet" />
        <style>
            body {
                margin: 0;
                padding: 0;
            }

            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }
            #start{
                position: absolute;
                z-index: 1;
                top:10px;left:10px;
                float: left;
            }
            #stop{
                position: absolute;
                z-index: 1;
                top:50px;left:10px;
                float: left;
            }
        </style>
    </head>
    <body>

        <div id="domId" style="position: absolute;top:20px;left:20px;border: #0088FF;width:300px;height: 200px;"></div>
        <script src="js/three.min.js"></script>
        <script src="js/GLTFLoader.js"></script>
        <div id="map"></div>
        <button id="start">开启</button>
        <button id="stop">暂停</button>

        <script>
            // TO MAKE THE MAP APPEAR YOU MUST
            // ADD YOUR ACCESS TOKEN FROM
            // https://account.mapbox.com
            
            let timer;

           let camera, scene, renderer;
            mapboxgl.accessToken = '你的秘钥';
            var map = (window.map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/light-v10',
                zoom: 18,
                center: [148.9819193502973, -35.398500434944886],
                pitch: 60,
                antialias: true // create the gl context with MSAA antialiasing, so custom layers are antialiased
            }));

            var modelOrigin = [148.9819193502973, -35.398500434944886];
            var modelAltitude = 0;
            var modelRotate = [Math.PI / 2, 90, 0];//调整角度
            
            
            var modelOrigin2 = [148.98200184048164, -35.39849545391921];

            // var m

最低0.47元/天解锁文章