vue.js+three.js+axios的问题求助

307 阅读1分钟

前端用的是vue,需要动态加载三维模型,数据要从后端请求。然后我写了以下代码

loadSTL() {
                let level = 1;
                axios.get('http://localhost:8081/wearLevel/level').then(function (response{
                    level = response.data
                })
                const THIS = this;
                const loader = new STLLoader();
                loader.load(
                    `${THIS.publicPath}models/${level}.STL`,
                    geometry => {
                        // 创建材质
                        const material = new THREE.MeshLambertMaterial({color: 0x7777ff})
                        this.mesh = new THREE.Mesh(geometry, material)
                        this.mesh.rotation.x = -0.5 * Math.PI
                        this.mesh.rotateY(Math.PI)
                        this.mesh.scale.set(0.6, 0.6, 0.6)
                        this.scene.add(this.mesh)
                    }
                )
 
            }

数据拿到了是这么个情况,level如愿拿到6这个等级,但是level并没有给到加载文件的loader.load()里面去。依然加载的是1.STL。 image.png

然后根据别人建议,修改代码如下

loadSTL() {
                const THIS = this;
                const loader = new STLLoader();
                let level = 1;
                axios.get('http://localhost:8081/wearLevel/level').then(function (response{
                    level = response.data
                    loader.load(
                    `${THIS.publicPath}models/${level}.STL`,
                    geometry => {
                        // 创建材质
                        const material = new THREE.MeshLambertMaterial({color: 0x7777ff})
                        this.mesh = new THREE.Mesh(geometry, material)
                        this.mesh.rotation.x = -0.5 * Math.PI
                        this.mesh.rotateY(Math.PI)
                        this.mesh.scale.set(0.6, 0.6, 0.6)
                        this.scene.add(this.mesh)
                        }
                    )
                })
            }

发现能够载到正确的文件了,但是前端的模型显示不出来 image.png 报错显示‘mesh’未定义,图形渲染不出来了,不知道是不是我this用错了。 image.png 后面把mesh注释掉,报错 onload不是一个方法

image.png

image.png 主要是我是个小白,也不知道three里面onload要写啥。到这里就无能为力了。还请大佬帮忙看看,到底哪里出了问题,应该怎么解决。不胜感激。 最后附上vue的结构。 image.png image.png 还请大家帮一下忙,看看是什么问题。