docs: add vertex colors instances

Author: nartc

apps/demo/src/app/app.routes.ts

@@ -21,4 +21,13 @@ export const routes: Routes = [
             asset: 'assets/demo/view-cube',
         },
     },
+    {
+        path: 'vertex-colors-instance',
+        loadComponent: () => import('./vertex-colors-instance/vertex-colors-instance.component'),
+        data: {
+            description: 'Three.js vertex colors with instances',
+            link: '/vertex-colors-instance',
+            asset: 'assets/demo/vertex-colors-instances',
+        },
+    },
 ];

apps/demo/src/app/cubes/cubes.component.ts

@@ -1,9 +1,6 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, inject, Input, ViewChild } from '@angular/core';
-import { extend, injectBeforeRender, NgtArgs, NgtCanvas, NgtStore } from 'angular-three';
+import { injectBeforeRender, NgtArgs, NgtCanvas, NgtStore } from 'angular-three';
 import * as THREE from 'three';
-import { OrbitControls } from 'three-stdlib';
-
-extend({ OrbitControls });
 
 @Component({
     selector: 'demo-cube',

apps/demo/src/app/vertex-colors-instance/vertex-colors-instance.component.ts

@@ -0,0 +1,79 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, inject, ViewChild } from '@angular/core';
+import { NgtArgs, NgtCanvas, NgtStore } from 'angular-three';
+// @ts-expect-error no type def for nice-color-palettes
+import niceColors from 'nice-color-palettes';
+import * as THREE from 'three';
+const niceColor = niceColors[Math.floor(Math.random() * niceColors.length)];
+
+@Component({
+    selector: 'demo-colors-instances',
+    standalone: true,
+    template: `
+        <ngt-instanced-mesh #instanced *args="[undefined, undefined, length]">
+            <ngt-box-geometry *args="[0.15, 0.15, 0.15]">
+                <ngt-instanced-buffer-attribute attach="attributes.color" *args="[colors, 3]" />
+            </ngt-box-geometry>
+            <ngt-mesh-lambert-material [vertexColors]="true" [toneMapped]="false" />
+        </ngt-instanced-mesh>
+    `,
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class ColorsInstances {
+    readonly length = 125000;
+
+    private readonly o = new THREE.Object3D();
+    private readonly c = new THREE.Color();
+    private readonly colorsArr = Array.from({ length: this.length }, () => niceColor[Math.floor(Math.random() * 5)]);
+
+    readonly colors = Float32Array.from(
+        Array.from({ length: this.length }, (_, index) =>
+            this.c.set(this.colorsArr[index]).convertSRGBToLinear().toArray()
+        ).flat()
+    );
+
+    @ViewChild('instanced') set instanced({ nativeElement }: ElementRef<THREE.InstancedMesh>) {
+        let i = 0;
+        for (let x = 0; x < 50; x++) {
+            for (let y = 0; y < 50; y++) {
+                for (let z = 0; z < 50; z++) {
+                    const id = i++;
+                    this.o.position.set(25 - x, 25 - y, 25 - z);
+                    this.o.updateMatrix();
+                    nativeElement.setMatrixAt(id, this.o.matrix);
+                }
+            }
+        }
+    }
+}
+
+@Component({
+    standalone: true,
+    template: `
+        <ngt-ambient-light />
+        <ngt-directional-light [intensity]="0.55" [position]="150" />
+        <demo-colors-instances />
+        <ngt-orbit-controls
+            *args="[camera, glDom]"
+            [enableDamping]="true"
+            [autoRotate]="true"
+            (beforeRender)="$any($event).object.update()"
+        />
+    `,
+    imports: [NgtArgs, ColorsInstances],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class Scene {
+    private readonly store = inject(NgtStore);
+    readonly camera = this.store.get('camera');
+    readonly glDom = this.store.get('gl', 'domElement');
+}
+
+@Component({
+    standalone: true,
+    template: ` <ngt-canvas [sceneGraph]="SceneGraph" [camera]="{ position: [0, 0, 1] }" /> `,
+    imports: [NgtCanvas],
+})
+export default class DemoVertexColorsInstances {
+    readonly SceneGraph = Scene;
+}

apps/demo/src/app/view-cube/view-cube.component.ts

@@ -1,6 +1,5 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, inject, ViewChild } from '@angular/core';
 import {
-    extend,
     injectBeforeRender,
     NgtArgs,
     NgtCanvas,
@@ -13,9 +12,6 @@ import {
     prepare,
 } from 'angular-three';
 import * as THREE from 'three';
-import { OrbitControls } from 'three-stdlib';
-
-extend({ OrbitControls });
 
 @Component({
     selector: 'view-cube',

apps/demo/src/main.ts

@@ -2,9 +2,11 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { provideRouter } from '@angular/router';
 import { extend } from 'angular-three';
 import * as THREE from 'three';
+import { OrbitControls } from 'three-stdlib';
 import { AppComponent } from './app/app.component';
 import { routes } from './app/app.routes';
 
 extend(THREE);
+extend({ OrbitControls });
 
 bootstrapApplication(AppComponent, { providers: [provideRouter(routes)] }).catch((err) => console.error(err));

package.json

@@ -66,6 +66,7 @@
         "@rx-angular/state": "^1.7.0",
         "@swc/helpers": "~0.4.14",
         "ngx-resize": "^1.0.5",
+        "nice-color-palettes": "^3.0.0",
         "rxjs": "~7.8.0",
         "three": "^0.148.0",
         "three-stdlib": "^2.21.6",