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;
    }
    }

高亮显示对象onMouse over不能正常工作

1 个答案: