Threejs with Angular 10 Flex Layout

[Fluqz]

Some of these questions can be found easily via search engines…

@visionhead

I am unsure what window.innerWidth & window.innerHeight are? Do these relate to the div container window size or the full window of the application?

Window: innerWidth property - Web APIs | MDN

@visionhead

I am not sure if this is the correct way of accessing the div container in question @ViewChild(‘rendererContainer’) rendererContainer: ElementRef;

Using a ViewChild is one of many ways this can be achieved. You could also use normal JS document.getElementByID('id').append(renderer.domElement)

@visionhead

Am I calling the resize event correctly i.e is this passing the size of the container element or am I passing the over all application window size?

You can call your event like that, this will work, but to reduce performance issues when using Eventlisteners in general, you should add and also remove your events when needed, because when the component is destroyed and revoked, you could end up having two of the same event registered. To remove a Eventlistener, you have to store the instance in a variable.

this.resizeEvent = this.resizeEventFunction.bind(this)
window.addEventListener('resize', this.resizeEvent)
window.removeEventListener('resize', this.resizeEvent)

@visionhead

How should I pass the correct size of the container window to my component.ts file?

I dont know what you want exactly. Do you want to specify your size? In px or percent? Or same as window size? You can call window.innerWidth anywhere in your app or store it globally and reuse it.
Also your container can be styled with css

@visionhead

My scene background is black. How do I change this?

this.scene.backround = new THREE.Color(0xFFFFFF)
or 
this.renderer.setClearColor(0xFFFFFF)

@visionhead

How do I limit the size of the scene window - is that just a html thing using FxLayout?

This will basically set the size of the canvas element
this.renderer.setSize(w, h)

Also one big thing to keep in mind is that Angular’s change detection is always triggered when any Event, RequestAnimationFrame or setTimeout/setInterval is called. That means, if you have a requestAnimationFrame running, with each call, Angular will update the whole app. This behavior can really fast lead to really bad performance. Imagin running a AnimationFrame and also having various mouse events in your app. Change detection will run over and over again recalculating values and change DOM to display.

To prevent some of this behavior you want to disable change detection on certain events

ngzone-flags.ts:

(window as any).__Zone_disable_requestAnimationFrame = true; // WILL DISABLED CHANGE DETECTION ON ANIMATION FRAME
(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'pointermove', 'wheel']; // BLACKLIST OF EVENTS TO NOT TRIGGER CHANGE DETECTION

include this file in your polyfills.ts
import './ngzone-flags

Another way is to inject NgZone and put specific events outside of Angulars zone like so

this.ngZone.runOutsideAngular( ()=> {

    // This event will not trigger change detection
    window.addEventListener('resize', this.resizeEvent) 
})