前端用的是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。
然后根据别人建议,修改代码如下
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)
}
)
})
}
发现能够载到正确的文件了,但是前端的模型显示不出来 报错显示‘mesh’未定义,图形渲染不出来了,不知道是不是我this用错了。 后面把mesh注释掉,报错 onload不是一个方法
主要是我是个小白,也不知道three里面onload要写啥。到这里就无能为力了。还请大佬帮忙看看,到底哪里出了问题,应该怎么解决。不胜感激。 最后附上vue的结构。 还请大家帮一下忙,看看是什么问题。