Three.js Camera 在设置光线追踪时总是未定义答案

【问题标题】：Three.js Camera always undefined when setting up ray tracingThree.js Camera 在设置光线追踪时总是未定义
【发布时间】：2021-05-26 22:20:16
【问题描述】：

我创建了一个three.js 元素来在屏幕上显示一些点，我的任务是单击两个并计算它们之间的距离。我在 Angular (8) 应用程序中执行此操作，并且正确设置了所有可见点和鼠标事件（指针向上/向下）。我的想法是在单击时从鼠标点进行光线追踪并突出显示一个顶点（我只有点，没有线或面）。因此，我尝试在我的场景中设置 Three.js RayTRacing，但每次我调用 setFromCamera 时，即使我始终在屏幕上显示点可见，相机也是未定义的。

public onMouseDown(event){    

    var mx = event.clientX;
    var my = event.clientY;
    
    this.caster.setFromCamera({x: mx, y: my}, this.camera);
    const intersections = this.caster.intersectObjects(this.scene.children);

    console.log("Mouse is down! " + mx + " " + my);
  }

如果我删除涉及脚轮的两条线，我会得到 x 和 y 输出。这个下一个 sn-p 是通过 ngAFterInit 调用的：

public configRaycaster(){
    this.caster = new THREE.Raycaster();    
  }

就我而言，一切都已设置好，我应该知道点击了哪个对象，但显然不是。

【问题讨论】：

标签： angular three.js

【解决方案1】：

看来我需要箭头函数来设置 eventListener 否则这是函数的本地函数。

this.container.nativeElement.addEventListener('pointerdown', (event) => this.onMouseDown(event), false);

不是

this.container.nativeElement.addEventListener('pointerup', this.onMouseDown, false);

【讨论】：