Angular Problems with renderer

Questions
, , ,
1

I want to use THREEjs with Angular and want to create a good structure. Therefore I am trying to put my render loop into a service.

requestAnimationFrame(this.requestRenderer.bind(this));

but I get this following error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'add')

I am uncertain if this is even possible:

my page script:

import {
  AfterViewInit,
  Component,
  ElementRef,
  Input,
  OnInit,
  ViewChild,
} from '@angular/core';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { RenderingServiceService } from '../shared/services/rendering-service/rendering-service.service';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss'],
})
export class Tab1Page implements AfterViewInit {
  @ViewChild('canvas') private canvasRef: ElementRef;

  scene!: THREE.Scene;
  controls!: OrbitControls;

  // Set Light
  light: THREE.DirectionalLight;
  lightProps = { intensity: 1, color: 0xffffff };

  // Set Cube
  geometry = new THREE.BoxGeometry(1, 1, 1);
  material = new THREE.MeshPhongMaterial({ color: 0x44aa88 });
  cubes: THREE.Mesh[] = [];
  camera: THREE.PerspectiveCamera;
  renderer!: THREE.WebGLRenderer;

  constructor(private myrenderService: RenderingServiceService) {}

  ngAfterViewInit(): void {
    // Set Scene
    this.camera = this.myrenderService.setCamerara();
    this.renderer = this.myrenderService.setRenderer(this.canvas);

    // Add to scene
    this.cubes = [
      this.makeInstance(this.geometry, 0x44aa88, 0),
      this.makeInstance(this.geometry, 0x8844aa, -2),
      this.makeInstance(this.geometry, 0xaa8844, 2),
    ];

    this.cubes.forEach((cube) => this.scene.add(cube));

    // Set Light
    this.light = new THREE.DirectionalLight(
      this.lightProps.color,
      this.lightProps.intensity
    );
    this.light.position.set(-1, 2, 4);
    this.scene.add(this.light);

    // Controls
    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
    // this.animate();
    // requestAnimationFrame(this.render);
    this.myrenderService.requestRenderer(this.scene, this.camera, this.cubes);
  }

  get canvas(): HTMLCanvasElement {
    return this.canvasRef.nativeElement;
  }

  makeInstance(geometry, color, x) {
    const material = new THREE.MeshPhongMaterial({ color });
    const cube = new THREE.Mesh(geometry, material);
    this.scene.add(cube);
    cube.position.x = x;

    return cube;
  }
}

my rendering service:

import { Injectable } from '@angular/core';
import * as THREE from 'three';

@Injectable({
  providedIn: 'root',
})
export class RenderingServiceService {
  //? Helper Properties (Private Properties);
  camera!: THREE.PerspectiveCamera;
  renderer!: THREE.WebGLRenderer;
  rotationSpeedX = 0.05;
  rotationSpeedY = 0.01;

  // Set Camera Property
  cameraProps = {
    fov: 75,
    aspect: 2,
    near: 0.1,
    far: 5,
  };
  constructor() {}

  setRenderer(canvas) {
    // Set Canvas
    this.renderer = new THREE.WebGLRenderer({ canvas: canvas });
    return this.renderer;
  }

  setCamerara() {
    // Set Camera
    this.camera = new THREE.PerspectiveCamera(
      this.cameraProps.fov,
      this.cameraProps.aspect,
      this.cameraProps.near,
      this.cameraProps.far
    );
    this.camera.position.z = 2;
    return this.camera;
  }

  requestRenderer(scene, camera, cubes) {
    this.renderer.render(scene, camera);
    requestAnimationFrame(this.requestRenderer.bind(this));

    const canvas = this.renderer.domElement;
    this.camera.aspect = canvas.clientWidth / canvas.clientHeight;
    this.camera.updateProjectionMatrix();
    if (this.resizeRendererToDisplaySize(this.renderer)) {
      this.camera.aspect = canvas.clientWidth / canvas.clientHeight;
      this.camera.updateProjectionMatrix();
    }
    this.animateCube(cubes);
  }

  renderrender() {}

  resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const pixelRatio = window.devicePixelRatio;
    const width = canvas.clientWidth * pixelRatio || 0;
    const height = canvas.clientHeight * pixelRatio || 0;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }
  animateCube(cubes) {
    const time = new Date();
    const getTime = time.getTime() * 0.001;
    cubes.forEach((cube) => {
      cube.rotation.x = getTime * this.rotationSpeedX * 100;
      cube.rotation.y = getTime * this.rotationSpeedY * 100;
    });
  }
}
2

In general, you should call bind() only once. If you want to keep references to e.g. renderer, scene and camera in a class (like a World instance or a view), define an animate() function like so:

function animate() {

	requestAnimationFrame( this._animate );

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

}

And this._animate is created in its constructor like so:

this.renderer = ...;
this.camera = ...;
this.scene = ...;

this._animate = animate.bind( this );
3

Just wanted to point out angular-three: :ice_cube: THREE.js integration for Angular :ice_cube: (github.com) in case you missed it.

Also, lots of Angular/Three Examples here and here

1 Like
4

Thanks for your swift reply and explanation @Mugen87 :smile:

I think I’ve understood my problem. Instead of using global variables with “this.”, I try to pass my scene, camera and cube as parameters to the requestRenderer(…) function. It might be a scoping issue because it is not clear if my scene, camera, and cube variables are passed by value or passed by reference. But please correct me if my thought are incorrect.

5

@anidivr oh I’ve actually missed those. Thanks for pointing out those resources! I will look into it. I’ve searched this forum before for useful resources. But found none. I’ve searched in topic “Resource” with the tag “Angular” only one entry. So thanks a lot :grin: