javascript - 鼠标悬停时突出显示对象无法正常工作

Question

所以当鼠标悬停在必要的对象(球体)上时，我想突出显示对象。由于某种原因，它检测到了球体，并改变了它的颜色，但它被塞住了。每当我将鼠标悬停在其他对象上时，它不会进行光线转换，仍会更新当前所选对象(原始球体)的颜色。

我引用了Three.js官方示例中的原始示例:https://threejs.org/examples/#webgl_interactive_cubes

当然，省略了大部分不必要的代码:)

export default {
name: 'ThreeTest',
data() {
  return {
    mouse: new THREE.Vector2(),
    rayCaster: new THREE.Raycaster(),
    spheres: [],
    intersectHighlighted: null,
    highlighted: null
  };
},
methods: {
  init() {

    //Map Creation:
    let map = document.getElementById('map');
    this.mapDimensions = map.getBoundingClientRect();
    this.mapWidth = this.mapDimensions.width;
    this.mapHeight = this.mapDimensions.height;
    this.scene = new THREE.Scene();
    this.scene.background = new THREE.Color( 0xf0f0f0 );

    //Camera:
    this.camera = new THREE.PerspectiveCamera(
      60,
      this.mapWidth/this.mapHeight,
      0.1,
      1000,
    );
    this.camera.position.z = 3;

    // renderer and canvas creation:
    this.renderer = new THREE.WebGLRenderer();
    this.renderer.setSize(this.mapWidth, this.mapHeight);
    map.appendChild(this.renderer.domElement);



    // EVENT LISTENERS:
    map.addEventListener('mouseover', this.highlightPoi, false);
    map.addEventListener('mouseover', this.mouseOverScene, false);


  },

  // HELPER FUNCTIONS:

  mouseOverScene (event) {
    event.preventDefault();
    let rect = event.target.getBoundingClientRect();
    let x = event.clientX - rect.left;
    let y = event.clientY - rect.top;

    this.mouse.x = ( x / this.mapWidth) * 2 - 1;
    this.mouse.y = - ( y / this.mapHeight ) * 2 + 1;

    this.rayCaster.setFromCamera(this.mouse, this.camera);
  },


  animate() {
    requestAnimationFrame(this.animate);
    this.render();
  },

  render() {

    // find intersections

    let highlighted = this.highlighted;
    let renderedRaycaster = this.rayCaster;
    renderedRaycaster.setFromCamera(this.mouse, this.camera);

    let intersectHighlighted = this.intersectHighlighted;
    intersectHighlighted = renderedRaycaster.intersectObjects(this.spheres);

    if (intersectHighlighted.length > 0) {
      console.log("I'm in if 1");
      if (highlighted !== intersectHighlighted[0].object) {
        if ( highlighted ) highlighted.material.color.setHex( highlighted.currentHex );
        console.log("I'm in if 3");

        highlighted = intersectHighlighted[0].object;
        highlighted.currentHex = highlighted.material.color.getHex();
        highlighted.material.emissive.setHex( 0xff0000 );
        console.log(intersectHighlighted.length);
      }
    } else if (intersectHighlighted !== this.spheres.object) {
      console.log("I'm in else");
      if ( highlighted ) highlighted.material.color.setHex( highlighted.currentHex );
      highlighted = null;
      console.log(highlighted);
      console.log(intersectHighlighted);
      console.log(intersectHighlighted.length);
    }

    this.renderer.render(this.scene, this.camera);
  },
},

预期结果:每当鼠标悬停在球体上时，它都会突出显示，并且在未悬停在球体上时返回原始颜色。

实际:它仅突出显示一个球体，并且当鼠标悬停在其上时不会返回到原始颜色。

Answer 1

这是我的解决方案:

所以，显然问题是通过链表推理解决的。我将全局变量重新分配给本地变量，这搞砸了我的代码+将 mouseover 事件处理程序更改为 mousemove 以不断更新鼠标坐标。这是更正后的代码:

init(){
    map.addEventListener('mousemove', this.mouseOverScene,false);
},

render() {


    // find intersections

    this.rayCaster.setFromCamera(this.mouse, this.camera);

    this.intersectHighlighted = this.rayCaster.intersectObjects(this.spheres);

    if ( this.intersectHighlighted.length > 0) {
      if (this.highlighted !=  this.intersectHighlighted[0].object) {
        if ( this.highlighted ) this.highlighted.material.emissive.setHex( this.highlighted.currentHex );

        this.highlighted =  this.intersectHighlighted[0].object;
        this.highlighted.currentHex = this.highlighted.material.emissive.getHex();
        this.highlighted.material.emissive.setHex( 0xff0000 );
      }
    } else {
      if ( this.highlighted ) {
        this.highlighted.material.emissive.setHex( this.highlighted.currentHex );
      }
      this.highlighted = null;
    }
    }