threeJS 根据户型图绘制 3D模型 1

户型图

效果图

核心代码

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            test: "改变相机位置",
            scene: '',
            renderer: "",
            camera: "",
            controls: "",  // 鼠标控件
            fh: 2, // 地面高度
            wallHeight: 12,
            wallWeight: 1,
            angle: 0,
            roam: false,  // 漫游  开启漫游状态时应该禁用一切

        },
        methods: {
            // 初始化场景
            initScene() {
                this.scene = new THREE.Scene()
            },
            // 初始化相机
            initCamera(w = 500, h = 500) {
                var camera = new THREE.PerspectiveCamera(45, w / h, 0.1, 10000);
                camera.position.set(100, 100, 100);
                camera.lookAt(100,-200,800);
                this.camera = camera
            },
            initRenderer(w = 500, h = 500) {
                renderer = new THREE.WebGLRenderer({
                    antialias: true
                });
                renderer.setSize(w, h);
                renderer.setClearColor(0x4682B4, 1.0);

                document.getElementById("3dAPP").appendChild(renderer.domElement);
                this.renderer = renderer
            },
            // 初始化灯光
            initLight() {
                var directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 模拟远处类似太阳的光源
                directionalLight.color.setHSL(0.1, 1, 0.95);
                directionalLight.position.set(0, 200, 0).normalize();
                this.scene.add(directionalLight);
                var ambient = new THREE.AmbientLight(0xffffff, 1); // AmbientLight 影响整个场景的光源
                ambient.position.set(0, 0, 0);
                this.scene.add(ambient);
            },
            // 初始化轨迹球控件  鼠标控件
            initControls() {
                var controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
                controls.enableDamping = true;
                controls.dampingFactor = 0.5;
                // 视角最小距离
                controls.minDistance = 0;
                // 视角最远距离
                controls.maxDistance = 5000;
                controls.enableKeys = true;
                // 最大角度
                // controls.maxPolarAngle = Math.PI / 2;
                controls.target = new THREE.Vector3(10, 10, 10);
                this.controls = controls
                console.log(controls)
            },

            // 地面
            createFloor() {
                var loader = new THREE.TextureLoader();
                var floor, floor1;
                loader.load("./img/cz.jpg", (texture) => {
                    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
                    texture.repeat.set(30, 30);
                    var floorGeometry = new THREE.BoxGeometry(100, 100, this.fh);
                    var floorMaterial = new THREE.MeshBasicMaterial({
                        map: texture,
                    });
                    floor = new THREE.Mesh(floorGeometry, floorMaterial);
                    floor.rotation.x = -Math.PI / 2;
                    floor.position.set(0, 0, 0)
                    floor.name = "地面";
                    this.scene.add(floor);
                });
            },
            /**
             * @param i  某一块墙  
             * @param wallHeight 墙高  
             * 
             */
            createwall(i,width=100, wallHeight = this.wallHeight, wallWeight = this.wallWeight) {
                var Geometry = new THREE.BoxGeometry(width, wallHeight, wallWeight);
                var mtl = []
                for (let i = 0; i < Geometry.faces.length; i++) {
                    mtl.push(
                        new THREE.MeshBasicMaterial({
                            color: new THREE.Color(Math.random() * 0xffffff)
                        })
                    )
                }
                var mesh = new THREE.Mesh(Geometry, mtl)

                /*
                    刚好在地面
                    模型自身高度 h0
                    地面高度 h1
                    (地面高度 + 模型高度) / 2  即 (h0+h1)/2
                */
                mesh.name = `wall${i}`
                switch (i) {
                    case 1:
                        mesh.position.set(0, (this.fh + wallHeight) / 2, 24.5)
                        break;
                    case 2:
                        mesh.position.set(0, (this.fh + wallHeight) / 2, -24.5)
                        break;
                    case 3:
                        mesh.rotation.y = Math.PI/2
                        mesh.position.set(41.5, (this.fh + wallHeight) / 2, 0)
                        break;
                    case 4:
                        mesh.rotation.y = Math.PI/2
                        mesh.position.set(-41.5, (this.fh + wallHeight) / 2, 0)
                        break;
                    case 5:
                        mesh.rotation.y = Math.PI/2
                        mesh.position.set(-24, (this.fh + wallHeight) / 2, 0)
                        break;
                    case 6:
                        mesh.position.set(-33, (this.fh + wallHeight) / 2, -2)
                        break;
                    case 7:
                        mesh.rotation.y = Math.PI/2
                        mesh.position.set(-11, (this.fh + wallHeight) / 2, -13)
                        break;
                    case 8:
                        mesh.position.set(-17.5, (this.fh + wallHeight) / 2, -12)
                        break;
                    case 9:
                        mesh.position.set(15, (this.fh + wallHeight) / 2, -2)
                        break;
                    case 10:
                        mesh.rotation.y = Math.PI/2
                        mesh.position.set(3, (this.fh + wallHeight) / 2, -13)
                        break;
                    case 11:
                        mesh.position.set(9, (this.fh + wallHeight) / 2, -12)
                        break;
                    case 12:
                        mesh.rotation.y = Math.PI/2
                        mesh.position.set(15, (this.fh + wallHeight) / 2, -18)
                        break;
                    case 13:
                        mesh.rotation.y = Math.PI/2
                        mesh.position.set(-11, (this.fh + wallHeight) / 2, 21)
                        break;

                }
                this.scene.add(mesh)
                // console.log(Geometry)
            },
            // 模型
            initContent() {
                this.createFloor();
                this.createwall(1, 84)
                this.createwall(2, 84)
                this.createwall(3, 50)
                this.createwall(4, 50)
                this.createwall(5, 50)
                this.createwall(6, 18)
                this.createwall(7, 23)
                this.createwall(8, 13)
                this.createwall(9, 53)
                this.createwall(10,23)
                this.createwall(11,13)
                this.createwall(12,13)
                this.createwall(13,8)
            },
            animate() {
                requestAnimationFrame(this.animate);
                this.renderer.render(this.scene, this.camera);
                this.update();
                if(this.roam){
                    this.angle+=0.005
                    // 重新设置相机位置，相机在XOY平面绕着坐标原点旋转运动
                    this.camera.position.x=200*Math.sin(this.angle)
                    this.camera.position.z=200*Math.cos(this.angle)
                    this.camera.lookAt(0,0,0);
                }
            },

            // 更新控件
            update() {
                // stats.update();
                this.controls.update();
                TWEEN.update();
            },

            init() {
                this.initScene();
                this.initCamera();
                // 初始化渲染器
                this.initRenderer(700, 700);
                // 初始化模型
                this.initContent();
                // 初始化灯光
                this.initLight();
                this.initControls();
            },

            // changePOS() {
            //     this.camera.position.set(0, 300, 10)
            //     this.animate()
            // }
        },
        mounted() {
            this.init();
            this.animate();
        }
    })
</script>