效果图:
实现步骤:
1.将数据模型保存到项目文件夹。
2.使用ArcGIS JS 4.X 创建Graphic,其中Symbol类型为Object3DSymbol。
ArcGIS JS 4.11 已经可以直接在前端加载GLTF格式3D模型而不需要通过使用ArcGIS Pro软件发布服务，但是如果模型的体积对渲染效率影响较大，50M以上执行地图操作(移动，缩放)基本上会有点不流畅。
<!DOCTYPE html><html>
<head>
<script type="text/javascript" src="libs/three.js"></script>
<script type="text/javascript" src="libs/OBJLoader.js"></script>
<script type="text/javascript">
var scene = null
var camera = null
var renderer = null
var mesh = null
var id = null
function init() {
renderer = new THREE.WebGLRenderer({//渲染器
canvas: document.getElementById('mainCanvas')//画布
})
renderer.setClearColor(0x000000)//画布颜色
scene = new THREE.Scene()//创建场景
camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100)//正交投影照相机
camera.position.set(15, 25, 25)//相机位置
camera.lookAt(new THREE.Vector3(0, 2, 0))//lookAt()设置相机所看的位置
scene.add(camera)//把相机添加到场景中
var loader = new THREE.OBJLoader()//在init函数中，创建loader变量，用于导入模型
loader.load('libs/port.obj', function(obj) {//第一个表示模型路径，第二个表示完成导入后的回调函数，一般我们需要在这个回调函数中将导入的模型添加到场景中
obj.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.side = THREE.DoubleSide
}
})
mesh = obj//储存到全局变量中
scene.add(obj)//将导入的模型添加到场景中
})
var light = new THREE.DirectionalLight(0xffffff)//光源颜色
light.position.set(20, 10, 5)//光源位置
scene.add(light)//光源添加到场景中
id = setInterval(draw, 20)//每隔20s重绘一次
}
function draw() {//们在重绘函数中让茶壶旋转：
renderer.render(scene, camera)//调用WebGLRenderer的render函数刷新场景
mesh.rotation.y += 0.01//添加动画
if (mesh.rotation.y >Math.PI * 2) {
mesh.rotation.y -= Math.PI * 2
}
}
</script>
</head>
<body onload="init()">
<canvas id="mainCanvas" width="800px" height="600px" ></canvas>
</body>
</html>
在vue项目中导入gltf/glb模型文件的时候出错了。1、gltf模型文件被加密了 2、draco压缩了 而我加载的gltf文件不是加密的，所以第一个原因pass掉，那么就是draco压缩了。解决的方法是，在vue项目中，我们需要将draco文件夹复制一份到public目录下，不然在加载gltf/glb资源的时候就会报以上的错。
