vue + cesium 加载gltf三维模型
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
在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
})
);
}
以上内容如对您有帮助,麻烦您给个关注,非常感谢!!!
GitHub 加速计划 / vu / vue
207.55 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)