为什么选择高德
成功案例
产品优势
数据优势
服务优势
精选权益
产品介绍
基础产品
地图
定位
导航
搜索
特色产品
外勤调度引擎
地图小程序
3D地形图
排线调度服务
GeoHUB定制地图
GIS企业智图
猎鹰轨迹服务
地址服务
LOCA 数据可视化
高德智慧景区
高德企业用车
解决方案
解决方案
智能派单
上门服务调度
零售铺货
智慧物流
智慧交通
出行
O2O
电商
社交
运动
智能硬件
开发支持
Web端
地图 JS API
LOCA数据可视化 API
地图组件
URI API
室内地图 JS API
地铁图 JS API
Android平台
Android 地图SDK
Android 轻量版地图SDK
Android 定位SDK
Android 导航SDK
Android 猎鹰SDK
iOS平台
iOS 地图SDK
iOS 轻量版地图SDK
iOS 定位SDK
iOS 导航SDK
iOS 猎鹰SDK
Web服务
Web服务 API
猎鹰服务 API
物流服务 API
其他
GeoHUB使用指南
微信小程序插件
高德地图手机版
地图Flutter插件
HarmonyOS 地图SDK
帮助与支持
常见问题
合规中心
开发者论坛
加入我们
地图工具
GeoHUB
坐标拾取器
地图名片
地图快速生成器
GeoHUB自定义地图
三维模型转换
服务升级
配额提升
GeoHUB自定义地图
GeoHUB数据中心
商用服务
高级能力
企业智图SaaS
云图市场
控制台
登录
注册
退出
我的消息
云图市场
应用管理
GeoHUB
开发者示例
ThreeJS使用
利用 ThreeJS 实现动态围栏效果
使用 ThreeJS 加载模型和路径动画
扩展图层
使用 Canvas 在地图上播放视频
‹
›
使用 ThreeJS 加载模型和路径动画
源代码编辑器
复制
运行
还原
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title> ThreeJS 模型加载和动画</title> <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> <style> html, body, #container { width: 100%; height: 100%; } </style> </head> <body> <div id="container"></div> <script> console.warn = console.log; </script> <script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.142/build/three.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.142/examples/js/loaders/GLTFLoader.js"></script> <script src="https://unpkg.com/@turf/turf/turf.min.js"></script> <script> javascript: (function () { var script = document.createElement('script'); script.onload = function () { var stats = new Stats(); document.body.appendChild(stats.dom); requestAnimationFrame(function loop() { stats.update(); requestAnimationFrame(loop) }); }; script.src = 'https://mrdoob.github.io/stats.js/build/stats.min.js'; document.head.appendChild(script); })() </script> <script type="text/javascript"> var map = new AMap.Map('container', { center: [116.271363, 39.992414], zooms: [2, 26], zoom: 17, viewMode: '3D', pitch: 50, }); var camera; var renderer; var scene; // 数据转换工具 var customCoords = map.customCoords; // 数据使用转换工具进行转换,这个操作必须要提前执行(在获取镜头参数 函数之前执行),否则将会获得一个错误信息。 var data = customCoords.lngLatsToCoords([ [116.271363, 39.992414], ]); var object; var objPosition = [116.271363, 39.992414] // 创建 GL 图层 var gllayer = new AMap.GLCustomLayer({ // 图层的层级 zIndex: 10, // 初始化的操作,创建图层过程中执行一次。 init: (gl) => { // 这里我们的地图模式是 3D,所以创建一个透视相机,相机的参数初始化可以随意设置,因为在 render 函数中,每一帧都需要同步相机参数,因此这里变得不那么重要。 // 如果你需要 2D 地图(viewMode: '2D'),那么你需要创建一个正交相机 camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 100, 1 << 30); renderer = new THREE.WebGLRenderer({ context: gl, // 地图的 gl 上下文 // alpha: true, // antialias: true, // canvas: gl.canvas, }); // 自动清空画布这里必须设置为 false,否则地图底图将无法显示 renderer.autoClear = false; scene = new THREE.Scene(); // 环境光照和平行光 var aLight = new THREE.AmbientLight(0xffffff, 0.3); var dLight = new THREE.DirectionalLight(0xffffff, 1); dLight.position.set(1000, -100, 900); scene.add(dLight); scene.add(aLight); initGltf() }, render: () => { // 这里必须执行!!重新设置 three 的 gl 上下文状态。 renderer.resetState(); // 重新设置图层的渲染中心点,将模型等物体的渲染中心点重置 // 否则和 LOCA 可视化等多个图层能力使用的时候会出现物体位置偏移的问题 customCoords.setCenter([116.271363, 39.992414]); var { near, far, fov, up, lookAt, position } = customCoords.getCameraParams(); // 2D 地图下使用的正交相机 // var { near, far, top, bottom, left, right, position, rotation } = customCoords.getCameraParams(); // 这里的顺序不能颠倒,否则可能会出现绘制卡顿的效果。 camera.near = near; camera.far = far; camera.fov = fov; camera.position.set(...position); camera.up.set(...up); camera.lookAt(...lookAt); camera.updateProjectionMatrix(); // 2D 地图使用的正交相机参数赋值 // camera.top = top; // camera.bottom = bottom; // camera.left = left; // camera.right = right; // camera.position.set(...position); // camera.updateProjectionMatrix(); renderer.render(scene, camera); // 这里必须执行!!重新设置 three 的 gl 上下文状态。 renderer.resetState(); }, }); map.add(gllayer); // 初始化模型 function initGltf() { var loader = new THREE.GLTFLoader(); loader.load('https://a.amap.com/jsapi_demos/static/gltf/Duck.gltf', (gltf) => { object = gltf.scene; object.scale.set(30, 30, 30) setRotation({ x: 90, y: 0, z: 0 }); setPosition(objPosition); scene.add(object); startMove(); }); } function setRotation(rotation) { var x = Math.PI / 180 * (rotation.x || 0); var y = Math.PI / 180 * (rotation.y || 0); var z = Math.PI / 180 * (rotation.z || 0); object.rotation.set(x, y, z); } function setPosition(lnglat) { // 对模型的经纬度进行转换 var position = customCoords.lngLatsToCoords([ lnglat ])[0]; object.position.setX(position[0]) object.position.setY(position[1]) } function setAngle(angle) { var x = object.rotation.x; var z = object.rotation.z; var y = Math.PI / 180 * angle; object.rotation.set(x, y, z); } // 改变模型位置和角度 var centerPoint = turf.point([116.271363, 39.992414]); var timer = 0; function startMove() { requestAnimationFrame(function () { timer += 0.4; var pos = turf.transformTranslate(centerPoint, 0.3, timer).geometry.coordinates; var angle = timer; setPosition(pos); setAngle(angle); // 执行地图的渲染 map.render(); startMove(); }); } </script> </body> </html>
控制台
清空
示例
中心
常见
问题
智能
客服