渲染场景后单击时将对象添加到场景中（three.js，角度）

Question

我正在尝试使用three.js和angular制作类似于geogebra的应用。因此，我有main.service.ts设置了场景，还有toolbar.component.ts可以选择工具，单击画布并添加了对象。 我的问题是对象没有添加到场景中。

对象本身已添加到“场景”对象，但未添加到画布上。我尝试再次调用render/animate方法，但是结果是相同的。

// main.service.ts
export class MainService implements OnDestroy {
  private canvas: HTMLCanvasElement;
  renderer: THREE.WebGLRenderer;
  camera: THREE.PerspectiveCamera;
  scene: THREE.Scene;
  private light: THREE.AmbientLight;
  private spotLight: THREE.SpotLight;
  private axes: THREE.AxesHelper;
  grid: THREE.GridHelper;
  private controls: OrbitControls;
  private objects: THREE.Object3D[] = [];

  readonly windowWidth: number = window.innerWidth;
  readonly windowHeigth: number = window.innerHeight;
  readonly deviceRatio: number = window.devicePixelRatio;
  private frameId: number = null;

  constructor() {}

  createScene(canvas: ElementRef<HTMLCanvasElement>): void {
    this.canvas = canvas.nativeElement;
    this.scene = new THREE.Scene();
    this.renderer = new THREE.WebGLRenderer({
      canvas: this.canvas,
      alpha: true,
      antialias: true,
    });
    this.camera = new THREE.PerspectiveCamera(75, this.windowWidth / this.windowHeigth, 0.1, 1000);
    this.light = new THREE.AmbientLight(0x0f0f0f);
    this.spotLight = new THREE.SpotLight(0xffffff, 1.5);
    this.axes = new THREE.AxesHelper(50);
    this.grid = new THREE.GridHelper(90, 9, 0xff3d2583, 0x55565656);
    this.controls = new OrbitControls(this.camera, this.renderer.domElement);

    const draggableObjects = [];

    DragControls.install({ THREE: THREE });
    this.scene.background = new THREE.Color(0xf0f0f0);
    this.camera.position.set(75, 75, 75);
    this.camera.lookAt(this.scene.position);
    this.light.position.set(10, 50, 130);
    this.spotLight.position.set(0, 500, 2000);
    this.renderer.setPixelRatio(this.deviceRatio);
    this.renderer.setSize(this.windowWidth, this.windowHeigth);
    this.controls.update();
    this.scene.add(this.axes, this.grid, this.light, this.spotLight);
    this.objects.push(this.grid);

    const dragControls = new DragControls(draggableObjects, this.camera, this.renderer.domElement);
    dragControls.addEventListener('dragstart', () => {
      this.controls.enabled = false;
    });
    dragControls.addEventListener('dragend', () => {
      this.controls.enabled = true;
    });
  }

  animate(): void {
    requestAnimationFrame(this.animate.bind(this));
    this.render();
  }

  render(): void {
    this.renderer.render(this.scene, this.camera);
  }

  private resize(): void {
    this.camera.aspect = this.windowWidth / this.windowHeigth;
    this.camera.updateProjectionMatrix();

    this.renderer.setSize(this.windowWidth, this.windowHeigth);
  }
}

// main.component.ts
export class MainComponent implements OnInit {
  @ViewChild('canvas', { static: true })
  public canvas: ElementRef<HTMLCanvasElement>;

  constructor(private mainService: MainService) {}

  ngOnInit() {
    this.mainService.createScene(this.canvas);
    this.mainService.animate();
  }
}

// tool-manager.service.ts
export class ToolManagerService {
  private point: Point;

  constructor(private mainService: MainService) {}

  createObject(name: string): void {
    this.point = new Point();
    this.point.createPoint();
    this.point.position.set(0, 0, 0);

    this.engineService.scene.add(this.point);
    this.engineService.animate();
  }
}

// point.ts
export class Point extends THREE.Object3D {
  private sphereGeometry: THREE.SphereBufferGeometry;
  private sphereMaterial: THREE.MeshLambertMaterial;
  private sphere: THREE.Mesh;

  constructor() {
    super();
  }

  createPoint(): void {
    this.sphereGeometry = new THREE.SphereBufferGeometry(2, 32, 32);
    this.sphereMaterial = new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff });
    this.sphere = new THREE.Mesh(this.sphereGeometry, this.sphereMaterial);

    this.sphere.receiveShadow = true;
    this.sphere.castShadow = true;
  }
}