three点击交互，改变材质颜色

 

three点击交互，改变材质颜色

一、在vue的的methods方法中写入

  // 模型点击改变颜色
    onmodelclick(event) {
      var raycaster = new THREE.Raycaster();
      let mouse = new THREE.Vector2();
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
      raycaster.setFromCamera(mouse, this.camera);
      const intersects = raycaster.intersectObjects(this.kechouObj);
      if (intersects.length > 0) {
        if(this.highlightFace){
          this.highlightFace.material = this.highlightFace.material0;;
        }
        intersects[0].object.material0 = intersects[0].object.material;
        intersects[0].object.material = new THREE.MeshBasicMaterial({
          color: "#FF00FF",
          transparent: true,
          opacity: 0.5
        });
        this.highlightFace = intersects[0].object;
      }
      return intersects;
    }

二、在canvas画布中调用这个方法

 // 创建控件对象
    createControls() {
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.renderer.domElement.addEventListener("click", this.onmodelclick);
    },

更多疑问请加学习群：910316886

欢迎学习讨论