四时宝库

Threejs点击事件不像我们一般的使用方法用click进行点击，需要使用射线Raycaster，

下面是一个完整的例子，加载obj模型，通过名称获取物体并且为点击到的物体修改颜色

一、在初始化的时候在window上绑定click事件

window.addEventListener("click",this.onMouseClick,false)

    onMouseClick(event){
      var intersects = this.getIntersects(event)
      if(intersects.length){
        intersects[0].object.material.color.set("pink")  //设置颜色
      }
    },

    getIntersects(event){
      event.preventDefault()
      let raycaster = new Three.Raycaster()
      let mouse = new Three.Vector2()
      mouse.x = (event.layerX/this.container.clientWidth)*2-1
      mouse.y = -(event.layerY/this.container.clientHeight)*2+1
      raycaster.setFromCamera(mouse,this.camera)
      var intersects = raycaster.intersectObjects(this.scene.children)  // intersectObjects第二个参数为true包含子集
      console.log(intersects)
      return intersects
    },

    initModel() {
      new OBJLoader()
        .setPath("/static/models/obj/")
        .load(`xxx.obj`, (obj) => {
          obj.castShadow = true;
          obj.receiveShadow = true;
          obj.scale.set(0.1, 0.1, 0.1);
          obj.position.set(0,-10,0);
          //通过名字获取MESH
          let testObj = obj.getObjectByName("name1")
          this.testObj = testObj
          this.scene.add(obj);
        });
    },

    changeColor(){
       this.testObj.material.color.set("pink")
    },
    resetColor(){
       this.testObj.material.color.set('rgb(255,255,255)')   //color:rgb(1,1,1) 把255当成1
    },