ArcGIS js 4.13 使用Mesh组件加载GLTF Model显示不出来
我用的模型是网上下载的，下载地址在这里：https://sketchfab.com/3d-models/avro-lancaster-2f15889043d84b09835aea5fa47ac0af
下载之后，我将模型文件引入整个React项目中，http请求中资源全部请求成功，就是渲染不出来，麻烦帮我看看。
代码如下：
下载之后，我将模型文件引入整个React项目中，http请求中资源全部请求成功，就是渲染不出来，麻烦帮我看看。
代码如下：
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<!--
ArcGIS API for JavaScript, https://js.arcgis.com
For more information about the import-gltf sample, read the original sample description at developers.arcgis.com.
https://developers.arcgis.com/ ... .html
-->
<title>Import glTF 3D Models - 4.13</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>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
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) {
// load web scene from ArcGIS Online
var map = new Map({
basemap: "satellite"
});
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);
const graphicsLayer = new GraphicsLayer();
// graphicsLayer.add(graphic);
map.add(graphicsLayer);
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) {
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);
}
createGltf("/scene.gltf")
});
</script>
</head>
<body></body>
</html>
1 个回复
swaggyP - 网络粉刷匠
赞同来自:
要回复问题请先登录或注册