首先得理解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