arcgis js 4.13 GLTF模型消失

通过API加入的GLTF模型,某些角度下对地图平移时,放大时,鼠标右键按住旋转相机时,模型会突然消失。
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>前端加载gltf模型</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.13/esr ... ot%3B />
<script src="https://js.arcgis.com/4.13/%26 ... gt%3B
<style type="text/css">
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}

.add_models {
position: absolute;
top: 30px;
left: 80px;
height: 25px;
line-height: 25px;
text-align: center;
padding: 0 10px;
color: white;
font-size: 14px;
background-color: #09f;
}

.add_mesh_models {
position: absolute;
top: 80px;
left: 80px;
height: 25px;
line-height: 25px;
padding: 0 10px;
color: white;
font-size: 14px;
background-color: #09f;
}
</style>

</head>

<body>
<div id="viewDiv">

</div>
<button class="add_models">
直接构建graphic添加模型
</button>

<button class="add_mesh_models">
Mesh创建gltf模型
</button>

<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
require([
"esri/views/SceneView",
"esri/Map",
"esri/layers/TileLayer",
"esri/layers/GraphicsLayer",
"esri/Graphic",
"esri/geometry/Point",
"esri/geometry/Mesh",
"esri/geometry/SpatialReference",

"esri/widgets/Sketch/SketchViewModel"
], function(SceneView, Map, TileLayer, GraphicsLayer, Graphic, Point, Mesh, SpatialReference, SketchViewModel) {
var tileLayer = new TileLayer({
url: "http://192.168.12.141:6080/arc ... ot%3B
})
//这里修改为最新支持的墨卡托标准,支持geometryEngine类。
tileLayer.spatialReference = new SpatialReference({
wkid: 102100,
latestWkid: 3857
})
var map = new Map({
basemap: {
baseLayers: [tileLayer]
}
})
var initialViewParams = {
map: map,
container: "viewDiv",
zoom: 12, //当前缩放值
center: [113.03, 23.03], //中心点位,
qualityProfile: "high",
highlightOptions: {
fillOpacity: 0,
color: [255, 0, 0, 0.8],
haloOpacity: 0.8
},
camera: {
"position": [113.03, 23.03, 10000],
"tilt": 45,
"heading": 30,
}
};
var scenView = new SceneView(initialViewParams);

//加载gltf
var point = new Point({
x: 113.03,
y: 23.04,
z: 0
})

const symbol = {
type: "point-3d",
symbolLayers: [{
type: "object",
width: 5000,
height: 100000,
resource: {
href: "gltf/models.glb"
}
}]
}

const graphic = new Graphic({
geometry: point,
symbol: symbol
})

const graphicsLayer = new GraphicsLayer();
// graphicsLayer.add(graphic);
map.add(graphicsLayer)

/******事件start********/
scenView.watch("camera", function(camera){
console.log(camera)
})




/******事件end********/

$(".add_models").on("click", function(e) {
graphicsLayer.add(graphic);
})

$(".add_mesh_models").on("click", function(e){
var gltfUrl = "gltf/Unity2GLTF.gltf"
createGltf(gltfUrl)
})


function createGltf(gltfUrl) {
// geographic location where the origin of the model will be placed
const location = new Point({
x: 113.030446,
y: 23.037887,
z: 50
});

Mesh.createFromGLTF(location, gltfUrl)
.then(function(geometry) {
// increase it a factor of 3
console.log(geometry)
// add it to a graphic
const graphic = new Graphic({
geometry,
symbol: {
type: "mesh-3d", // autocasts as new MeshSymbol3D()
symbolLayers: [{
type: "fill", // autocasts as new FillSymbol3DLayer()
material: {
color: [255, 255, 255, 1],
// colorMixMode: "tint"
}
}]
}
});

graphicsLayer.add(graphic);
})
.catch(console.error);
}

}) //map
})
</script>
</body>

</html>
加载后的效果图:

测试.png

 
继续放大后或向左平移视图后,模型消失:

模型消失.png

 
已邀请:

许丹石 - Esri技术支持工程师

赞同来自:

能提供这个模型文件吗?我测试一下。然后提个bug

要回复问题请先登录注册