Question

我在用要为场景播放的动画实现OrbitControls时遇到麻烦。这是将OrbitControls添加到AngularJS组件的基本知识：

export class DemoComponent implements OnInit {
  scene: THREE.Scene;
  camera: THREE.PerspectiveCamera;
  renderer: THREE.WebGLRenderer;
  controls: THREE.OrbitControls;

  constructor() {
    this.render = this.render.bind(this);
  }

  //scene defined in function...

  createControls() {
     this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
     this.controls.addEventListener('change', this.render);
  }

  //model defined in function....


   render() {
      requestAnimationFrame(this.render);

      //simple animation
      this.model.rotation.z += .01;

      //this.controls.update();

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

运行代码时，我得到黑屏，直到单击它，然后它开始动画。控制台仅显示以下违规：

[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>

[Violation] 'load' handler took 458ms

但是，当我从this.controls.addEventListener('change', this.render);删除createControls时，它没有出现任何控制台错误，但是即使单击，我的场景也保持黑色。

我相信问题可能是因为我正在根据render进行OrbitControls更改，而ngAfterViewInit(): void { this.createScene(); this.createLights(); this.createControls(); this.createModel(); }也负责动画制作，但我不确定。

我已经仔细研究了这些相关的SO问题，但找不到解决方案： Three.js + OrbitControls - Uncaught TypeError: Cannot read property 'render' of undefined

TypeError: array[i].call is not a function Error

对于解决此问题的任何建议，我们将不胜感激！

编辑： 这是我的方法调用方式：

scatter3

ThreeJS遇到OrbitControls和动画问题

0 个答案: