threejs 笔记 vue ----2 创建一个物体点击时准确获取其在世界坐标中位置

1.创建楼栋

在上一篇文章中已经了解了创建物体的几个要素，本文在上一基础来进行实现，同样的所有的变量声明还是在init中完成，或者直接在mounted中声明，不要在data中，可以试验下在data中的效果，在这个例子中会很明显的感觉到浏览器渲染的卡顿

撸起，在init中添加创建楼栋this.createFloor();

createFloor(){
        let _this = this;
         let a = createFloorOne(10,-66.6,7,'A栋',['402'],['501']);
          a.rotateY(Math.PI / 2);
          a.position.set(-36.9,0,103);
          _this.mesh.add(a);
          let C = createFloorOne(10,-66.6,7,'C栋');
          _this.mesh.add(C);
          /*x,y 表示楼栋起点坐标，floorNum 表示有多少楼层 name 楼栋名称，contractWarning 表示合同到期预警，freeRoom 表示空闲房间 两个都是数组 */
        function createFloor(x,y,floorNum,name,freeRoom,contractWarning) {
          // l楼的长度 w 楼的宽度 h每层楼的高度 t墙的厚度  hd窗户高度的初始底数，既是第一层窗户的离地距离
          let l= 20, w = 60 , h = 8, hd = 6 , t = 0.5;  freeRoom = freeRoom || [];contractWarning = contractWarning || [];
          let group = new THREE.Group();// 声明组对象
          /**** 楼栋的矩形平面图 外轮廓起点值x，y轴小于内轮廓值 中间转点值则大于 内轮廓***/
          let BRoadOut = [
            [x, y],
            [x, y + w],
            [x + l, y + w],
            [x + l, y],
            [x, y]
          ];
          // 内墙轮廓
          let BRoadIn = [
            [x + t, y + t],
            [x + t, y + w - t],
            [x + l - t, y + w - t],
            [x + l - t, y + t],
            [x + t, y + t]
          ];
          /*楼栋*/
          let BRoadShape = createShape(BRoadOut, BRoadIn);// 生成矩形
          let BRoadGeometry = createExtrudeBufferGeometry(BRoadShape, h * floorNum + 2);// 拉伸矩形成长方体，并绕y轴旋转
          let BRoadMesh = createMesh1(BRoadGeometry, {color: 0xd3d7d4, side: THREE.DoubleSide});
          BRoadMesh.name = name;// 设置几何体的name值
          BRoadMesh.roomType = 'B';// 设置几何体类型
          BRoadMesh.castShadow = true;//开启阴影投射
          group.add(BRoadMesh);
          /* 楼顶 */
          let BFloorRoofTop = [
            [x + t, y + t],
            [x + t, y + w - t],
            [x + l - t, y + w - t],
            [x + l - t, y + t],
            [x + t, y + t]
          ];
          let BFloorRoofTopShape = createShape(BFloorRoofTop);
          let BFloorRoofTopGeometry = createExtrudeBufferGeometry(BFloorRoofTopShape, h * floorNum + 0.5);
          let BFloorRoofTopMesh = createMesh1(BFloorRoofTopGeometry, {color: 0xfafafa, side: THREE.DoubleSide});
          BFloorRoofTopMesh.name = name;
          BFloorRoofTopMesh.roomType = 'F';