refactor(soba): adjust shaders with new renderer

Author: nartc

apps/docs/src/components/scenes/hud/hud.ts

@@ -0,0 +1 @@
+export default class Hud {}

libs/soba/shaders/src/lib/grid-material.ts

@@ -1,21 +1,21 @@
-import { NgtMaterial } from 'angular-three';
+import { NgtThreeElement } from 'angular-three';
 import { getVersion } from 'angular-three-soba/misc';
 import { shaderMaterial } from 'angular-three-soba/vanilla-exports';
-import { Color, ColorRepresentation, Side, Vector3 } from 'three';
+import * as THREE from 'three';
 
 export interface GridMaterialOptions {
 	/** Cell size, default: 0.5 */
 	cellSize: number;
 	/** Cell thickness, default: 0.5 */
 	cellThickness: number;
 	/** Cell color, default: black */
-	cellColor: ColorRepresentation;
+	cellColor: THREE.ColorRepresentation;
 	/** Section size, default: 1 */
 	sectionSize: number;
 	/** Section thickness, default: 1 */
 	sectionThickness: number;
 	/** Section color, default: #2080ff */
-	sectionColor: ColorRepresentation;
+	sectionColor: THREE.ColorRepresentation;
 	/** Follow camera, default: false */
 	followCamera: boolean;
 	/** Display the grid infinitely, default: false */
@@ -27,7 +27,7 @@ export interface GridMaterialOptions {
 	/** Fade from camera (1) or origin (0), or somewhere in between, default: camera */
 	fadeFrom: number;
 	/** Material side, default: THREE.BackSide */
-	side: Side;
+	side: THREE.Side;
 }
 
 export const GridMaterial = shaderMaterial(
@@ -39,12 +39,12 @@ export const GridMaterial = shaderMaterial(
 		fadeFrom: 1,
 		cellThickness: 0.5,
 		sectionThickness: 1,
-		cellColor: new Color(),
-		sectionColor: new Color(),
+		cellColor: new THREE.Color(),
+		sectionColor: new THREE.Color(),
 		infiniteGrid: false,
 		followCamera: false,
-		worldCamProjPosition: new Vector3(),
-		worldPlanePosition: new Vector3(),
+		worldCamProjPosition: new THREE.Vector3(),
+		worldPlanePosition: new THREE.Vector3(),
 	},
 	/* language=glsl glsl */ `
     varying vec3 localPosition;
@@ -110,7 +110,7 @@ export const GridMaterial = shaderMaterial(
   `,
 );
 
-export type NgtGridMaterial = NgtMaterial<InstanceType<typeof GridMaterial>, [GridMaterialOptions]>;
+export type NgtGridMaterial = NgtThreeElement<typeof GridMaterial>;
 
 declare global {
 	interface HTMLElementTagNameMap {

libs/soba/shaders/src/lib/point-material.ts

@@ -1,11 +1,11 @@
-import { NgtMaterial } from 'angular-three';
+import { NgtThreeElement } from 'angular-three';
 import { getVersion } from 'angular-three-soba/misc';
-import { PointsMaterial, PointsMaterialParameters } from 'three';
+import * as THREE from 'three';
 
 const opaque_fragment = getVersion() >= 154 ? 'opaque_fragment' : 'output_fragment';
 
-export class PointMaterial extends PointsMaterial {
-	constructor(props: PointsMaterialParameters) {
+export class PointMaterial extends THREE.PointsMaterial {
+	constructor(props: THREE.PointsMaterialParameters) {
 		super(props);
 		this.onBeforeCompile = (shader, renderer) => {
 			const { isWebGL2 } = renderer.capabilities;
@@ -30,7 +30,7 @@ export class PointMaterial extends PointsMaterial {
 	}
 }
 
-export type NgtPointMaterial = NgtMaterial<PointMaterial, [PointsMaterialParameters]>;
+export type NgtPointMaterial = NgtThreeElement<typeof PointMaterial>;
 
 declare global {
 	interface HTMLElementTagNameMap {