牛叔叔 的笔记

好好学习

2024-01-08 11:45

Vue使用Three.js绘制3D报错

牛叔叔

WEB前端

(218)

(0)

收藏

报错如下:

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条评论

点击登录参与评论