报错如下:
TypeError: 'get' on proxy: property 'modelViewMatrix' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value
解决方案是将scene定义从data中拿出来,放到全局变量中即可。
//wanmait.com三维展示视图
import * as THREE from 'three';
let scene;
export default {
name: "index.vue",
data(){
return {
camera:null,
renderer:null,
buildings:[{title:'1号楼'},{title:'2号楼'}],
};
}
,
mounted(){
this.initThree();
//this.addBuildings();
},
methods: {
initThree() {
const width = this.$refs.rendererDom.clientWidth;
const height = this.$refs.rendererDom.clientHeight;
console.log("width:"+width+",height:"+height);
//三维场景
scene = new THREE.Scene();
this.addBuildings();
//摄像头
this.camera = new THREE.PerspectiveCamera(30,width/height,1,3000);
//摄像头位置
this.camera.position.set(200,200,200);
//摄像头视角
this.camera.lookAt(0,0,0);
//渲染器
this.renderer = new THREE.WebGLRenderer();
//渲染范围
this.renderer.setSize(width, height);
console.log(this.renderer.domElement);
//渲染
this.renderer.render(scene,this.camera);
//绘制到界面上
this.$refs.rendererDom.appendChild(this.renderer.domElement);
},
addBuildings() {
let count = 1;
this.buildings.forEach(building => {
// 根据你的建筑数据创建建筑对象,并将其添加到场景中
// 示例几何体,需要根据实际情况调整
const geometry = new THREE.BoxGeometry(30, 30, 30);
// 示例材质,需要根据实际情况调整
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 网格模型(最终显示在Scene中的)
const mesh = new THREE.Mesh(geometry, material);
//设置位置
mesh.position.set(count*50,count*20,count*5);
count++;
// 将立方体添加到场景中
scene.add(mesh);
});
},
handleClick(event) {
// 处理鼠标点击事件,例如显示更多信息或触发其他事件
},
},
}

0条评论
点击登录参与评论