vue-Cesium 和 Cesium加载3dtiles ，出现An error occurred while rendering

最新推荐文章于 2025-05-21 16:52:32 发布

zhengshaofeng1

最新推荐文章于 2025-05-21 16:52:32 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： cesium vue-cesium 文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/zhengshaofeng1/article/details/107912767

cesium 同时被 2 个专栏收录

3 篇文章

订阅专栏

vue-cesium

1 篇文章

订阅专栏

本文介绍了解决从gltf1.0升级到gltf2.0后因不支持自定义shader导致的报错问题，提供了两种解决方案：一是通过修改gltf文件的extensions属性，二是使用osg2cesiumApp工具转换osgb文件为3dtiles。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

报错原因

这是因为gltf1.0升级到gltf2.0后不支持自定义shader

解决方法一

var fixGltf = function(gltf) {

    if (!gltf.extensionsUsed) {

        return;

    }

 

    var v = gltf.extensionsUsed.indexOf('KHR_technique_webgl');

    var t = gltf.extensionsRequired.indexOf('KHR_technique_webgl');

    // 中招了。。

    if (v !== -1) {

        gltf.extensionsRequired.splice(t, 1, 'KHR_techniques_webgl');

        gltf.extensionsUsed.splice(v, 1, 'KHR_techniques_webgl');

        gltf.extensions = gltf.extensions || {};

        gltf.extensions['KHR_techniques_webgl'] = {};

        gltf.extensions['KHR_techniques_webgl'].programs = gltf.programs;

        gltf.extensions['KHR_techniques_webgl'].shaders = gltf.shaders;

        gltf.extensions['KHR_techniques_webgl'].techniques = gltf.techniques;

        var techniques = gltf.extensions['KHR_techniques_webgl'].techniques;

 

        gltf.materials.forEach(function (mat, index) {

            gltf.materials[index].extensions['KHR_technique_webgl'].values = gltf.materials[index].values;

            gltf.materials[index].extensions['KHR_techniques_webgl'] = gltf.materials[index].extensions['KHR_technique_webgl'];

 

            var vtxfMaterialExtension = gltf.materials[index].extensions['KHR_techniques_webgl'];

 

            for (var value in vtxfMaterialExtension.values) {

                var us = techniques[vtxfMaterialExtension.technique].uniforms;

                for (var key in us) {

                    if (us[key] === value) {

                        vtxfMaterialExtension.values[key] = vtxfMaterialExtension.values[value];

                        delete vtxfMaterialExtension.values[value];

                        break;

                    }

                }

            };

        });

 

        techniques.forEach(function (t) {

            for (var attribute in t.attributes) {

                var name = t.attributes[attribute];

                t.attributes[attribute] = t.parameters[name];

            };

 

            for (var uniform in t.uniforms) {

                var name = t.uniforms[uniform];

                t.uniforms[uniform] = t.parameters[name];

            };

        });

    }

}

 

Object.defineProperties(Cesium.Model.prototype, {

    _cachedGltf: {

        set: function (value) {

            this._vtxf_cachedGltf = value;

            if (this._vtxf_cachedGltf && this._vtxf_cachedGltf._gltf) {

                fixGltf(this._vtxf_cachedGltf._gltf);

            }

        },

        get: function () {

            return this._vtxf_cachedGltf;

        }

    }

});