【vue项目】开启mock，threejs模型数据无法加载

最新推荐文章于 2024-09-09 09:00:00 发布

foo_ooooool

最新推荐文章于 2024-09-09 09:00:00 发布

阅读量1k

点赞数 1

分类专栏： # JavaScript 大前端文章标签： vue three.js js

本文链接：https://blog.csdn.net/onionlsh/article/details/113660507

版权

在使用MockJS模拟接口数据的Vue项目中，遇到Three.js模型加载失败的问题。由于MockJS默认未设置responseType，导致ArrayBuffer类型的模型数据无法正确解析。通过分析源码和调整MockJS配置，解决了模型加载错误，确保了Three.js能够正确处理ArrayBuffer响应。

摘要由CSDN通过智能技术生成

Mockjs：1.0.1-beta3

Threejs：0.109.0

场景：项目需求使用threeJS加载模型，模型数据放在OSS上；前端开发时，使用mock模拟接口数据。

因为mock会对所有的http请求进行拦截，源码会根据是否有匹配的数据模板，来决定走原生XHR还是mockXHR，附上mock初始化request的源码：

// 初始化 Request 相关的属性和方法
Util.extend(MockXMLHttpRequest.prototype, {
    // https://xhr.spec.whatwg.org/#the-open()-method
    // Sets the request method, request URL, and synchronous flag.
    open: function(method, url, async, username, password) {
        var that = this

        Util.extend(this.custom, {
            method: method,
            url: url,
            async: typeof async === 'boolean' ? async : true,
            username: username,
            password: password,
            options: {
                url: url,
                type: method
            }
        })

        this.custom.timeout = function(timeout) {
            if (typeof timeout === 'number') return timeout
            if (typeof timeout === 'string' && !~timeout.indexOf('-')) return parseInt(timeout, 10)
            if (typeof timeout === 'string' && ~timeout.indexOf('-')) {
                var tmp = timeout.split('-')
                var min = parseInt(tmp[0], 10)
                var max = parseInt(tmp[1], 10)
                return Math.round(Math.random() * (max - min)) + min
            }
        }(MockXMLHttpRequest._settings.timeout)

        // 查找与请求参数匹配的数据模板
        var item = find(this.custom.options)

        function handle(event) {
            // 同步属性 NativeXMLHttpRequest => MockXMLHttpRequest
            for (var i = 0; i < XHR_RESPONSE_PROPERTIES.length; i++) {
                try {
                    that[XHR_RESPONSE_PROPERTIES[i]] = xhr[XHR_RESPONSE_PROPERTIES[i]]
                } catch (e) {}
            }
            // 触发 MockXMLHttpRequest 上的同名事件
            that.dispatchEvent(new Event(event.type /*, false, false, that*/ ))
        }

        // 如果未找到匹配的数据模板，则采用原生 XHR 发送请求。
        if (!item) {
            // 创建原生 XHR 对象，调用原生 open()，监听所有原生事件
            var xhr = createNativeXMLHttpRequest()