报错如下:
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条评论
点击登录参与评论