three - 解决一些问题

附上 源代码地址
1，在之前，为了操控模型，引入了OrbitControls，该插件中绑定了鼠标滚轮事件，实现通过滚轮放大缩小的功能。但在此次需求中，当房子放大到某种程度时要去掉屋顶，缩小到某种程度时去掉屋顶。而此时在外面监听不了滚轮事件了，怎么办呢？当时想的就是改源码。但node_modules中的代码改了也没用啊，，呃，那就把它单独拿出来改。

文件拿出来后，修改文件中对其他插件的引用路径，（按照自己的文件结构修改）

在文件中增加方法：

this.getSpherical = function() {
    return spherical;
 }

组件中引入：

import { OrbitControls } from "../common/tool/OrbitControls"; //路径根据自己放的位置更改

初始化和之前相同。
现在在循环渲染函数中，来监听spherical的radius。

      var radius = this.controls.getSpherical().radius;
      console.log(radius); //打印发现当进行放大时，radius会减小。
      if(this.roof) { //加载屋顶模型时保存下来的
        if(radius && radius < 22) {
          this.roof.children[0].material.visible = false; //注意检查roof的结构
        } else {
          this.roof.children[0].material.visible = true;
        }
      }      

ok，解决了~

2，由于添加了屋顶，当通过俯视的视角点击屋子里的模型时，会发现它不会变色了。因为虽然屋顶被隐藏了，但他没有从场景中移除出去，所以点击时获取到的最表面的模型是屋顶，从而导致房间里的模型没有变色，缩小时房顶出现，会发现房顶变红了。
解决办法： 房顶不作为射线检测对象

this.group = new THREE.Group(); //利用group对象
this.group.add(...) //加入模型
this.scene.add(this.group); //将group放入场景中
var intersects = this.raycaster.intersectObjects(this.group, true);
 //参数1：检测对象，参数2：是否检测该对象的children

差不多就是这个意思。
另外如果要筛选被点击的模型，如：只让屋子里的模型被点击时变色，其他模型不变。可以在模型加载时绑定自定义的数据。
如：

obj.$data = { //给obj绑定信息
    name: '亚托克斯'
}

对拾取到的模型筛选：

const res = intersects.filter(res => res && res.object)[0];
    if (res && res.object && res.object.parent.$data) { //是否为绑定了自定义数据的模型
    res.object.material.color.set(0xff0000);
}

3，canvas底部留白问题

document.getElementsByTagName("canvas")[0].style.verticalAlign = "bottom";

4，希望能自适应窗口大小

    window.addEventListener("resize", this.onResize, false); //绑定监听
    onResize() {
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
    }

5，canvas高度不等于window.innerHeight
实际项目中，canvas可能只是作为背景，页面中还有其他组件，此时若页面高度大于window.innerHeight，canvas就占不满页面了。可以将原来代码中的所有window.innerHeight 改为实际的高度。此时canvas可能就不会自适应高度了，但能通过滚动条查看显示不全的部分。

但此时又出现的新的问题，当滚动条向下拉一部分时，你会发现点击获取模型好像不准确了。
回顾一下点击事件的代码，考虑应该是x,y坐标的问题，之前用的是clientX，clientY，获取的是相对于当前窗口的坐标。当出现滚动条且往下拉后，被拉上去的部分不会包括在里面，因此要换一个属性。改用offsetX/offsetY，获取鼠标指针位置相对于触发事件的对象的坐标。

因此更改原来的这部分代码：

this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1; // clientX --> offsetX
this.mouse.y = -(event.clientY / 1080) * 2 + 1;//clientY --> offsetY

问题解决~