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>继续放大后或向左平移视图后，模型消失:
1 个回复
许丹石
赞同来自:
要回复问题请先登录或注册