How to set up a basic three.js scene with StencilJS?

Questions
, ,
1

I do have a basic three.js scene set up with Ionic but I think all I need to do to make all the pieces fall into place is to set up a basic three.js scene in StenciJS. Then it should be smooth sailing.

In Ionic Component, I’m using ngOnInit to initialise all the variables and three.js scene then ngAfterViewInit to start my rendering loop and that’s where I initialise my renderer.

To add more context, I’ve shared a code snipped to show how I initialise the rendering loop (I make sure to not re-create the scene every frame so there’s a wee bit more in my actual ngAfterViewInit method)

this.renderer = new THREE.WebGLRenderer({
  canvas: this.canvas,
  antialias: true,
  alpha: true,
});
this.renderer.setPixelRatio(devicePixelRatio);
this.renderer.setSize(this.width, this.height);

this.controls = new PointerLockControls(
  this.camera,
  this.renderer.domElement
);

const render = () => {
  requestAnimationFrame(render);
  this.animate();
  this.renderer.render(this.scene, this.camera);
};
render();