vue + cesium 加载gltf三维模型
在Cesium中除了使用3dtiles加载海量模型还可以使用 ModelInstanceCollection 来批量加载 gltf 或 glb 格式的三维模型;核心代码如下:/* 批量处理gltf或glb格式模型 */function getModelPostInstances(data) {var modelPosts = [];for (var y = 0; y < data.lengt
·
在Cesium中除了使用3dtiles加载批量模型
也可以使用 ModelInstanceCollection 来批量加载 gltf 或 glb 格式的三维模型;
核心代码如下:
/* 批量处理gltf或glb格式模型 */
function getModelPostInstances(data) {
var modelPosts = [];
for (var y = 0; y < data.length; ++y) {
var longitude = data[y].longitude;
var latitude = data[y].latitude;
var height = data[y].height;
var position = Cesium.Cartesian3.fromDegrees(
longitude,
latitude,
height
);
var heading = Math.random();
var pitch = Math.random();
var roll = Math.random();
var scale = (Math.random() + 1.0) / 4.0 * 100;
var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(
position,
new Cesium.HeadingPitchRoll(heading, pitch, roll)
);
Cesium.Matrix4.multiplyByUniformScale(
modelMatrix,
scale,
modelMatrix
);
modelPosts .push({
modelMatrix: modelMatrix
});
}
return modelPosts ;
}
添加gltf模型:
/* 加载gltf或glb格式模型 */
function addGlbCollection() {
var modelInstances = getModelPostInstances(data);
var instanceCollection = window.viewer.scene.primitives.add(
new Cesium.ModelInstanceCollection({
url: "/static/data/model/test3D.gltf",
instances: modelInstances
})
);
}
以上内容如对您有帮助,麻烦您给个关注,非常感谢!!!
更多推荐
已为社区贡献2条内容
所有评论(0)