Skip to content

Commit 8e66e23

Browse files
Chau TranChau Tran
Chau Tran
authored and
Chau Tran
committed
docs: migrate kinematic
1 parent 00d276e commit 8e66e23

File tree

6 files changed

+169
-0
lines changed

6 files changed

+169
-0
lines changed

‎apps/sandbox/src/app/pages/kinematic/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<ngt-canvas [sceneGraph]="scene" [shadows]="true" [gl]="{alpha: false}" [camera]="{position: [0, -12, 16]}" />
2+
<ngts-stats [right]="true" />

‎apps/sandbox/src/app/pages/kinematic/index.page.ts

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import { RouteMeta } from '@analogjs/router';
2+
import { Component, computed, CUSTOM_ELEMENTS_SCHEMA, effect, Input } from '@angular/core';
3+
import { Triplet } from '@pmndrs/cannon-worker-api';
4+
import { injectBeforeRender, NgtArgs, NgtCanvas, NgtSignalStore } from 'angular-three';
5+
import { NgtcPhysics } from 'angular-three-cannon';
6+
import { injectBox, injectPlane, injectSphere } from 'angular-three-cannon/services';
7+
import { NgtsStats } from 'angular-three-soba/performance';
8+
// @ts-ignore
9+
import niceColors from 'nice-color-palettes';
10+
import * as THREE from 'three';
11+
12+
const niceColor = niceColors[Math.floor(Math.random() * niceColors.length)];
13+
14+
export const routeMeta: RouteMeta = {
15+
title: 'Kinematic Cube',
16+
};
17+
18+
@Component({
19+
selector: 'kinematic-spheres',
20+
standalone: true,
21+
templateUrl: 'kinematic-spheres.html',
22+
imports: [NgtArgs],
23+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
24+
})
25+
class Spheres extends NgtSignalStore<{ count: number }> {
26+
@Input() set count(count: number) {
27+
this.set({ count });
28+
}
29+
30+
readonly sphereCount = this.select('count');
31+
readonly colors = computed(() => new Float32Array(this.sphereCount() * 3));
32+
33+
readonly radius = 1;
34+
readonly sphereBody = injectSphere<THREE.InstancedMesh>((index) => ({
35+
args: [this.radius],
36+
mass: 1,
37+
position: [Math.random() - 0.5, Math.random() - 0.5, index * 2],
38+
}));
39+
40+
constructor() {
41+
super({ count: 100 });
42+
effect(() => {
43+
const kinematicCount = this.sphereCount();
44+
const colors = this.colors();
45+
const color = new THREE.Color();
46+
for (let i = 0; i < kinematicCount; i++) {
47+
color
48+
.set(niceColor[Math.floor(Math.random() * 5)])
49+
.convertSRGBToLinear()
50+
.toArray(colors, i * 3);
51+
}
52+
});
53+
}
54+
}
55+
56+
@Component({
57+
selector: 'kinematic-box',
58+
standalone: true,
59+
templateUrl: 'kinematic-box.html',
60+
imports: [NgtArgs],
61+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
62+
})
63+
class Box {
64+
readonly boxSize = [4, 4, 4] as Triplet;
65+
readonly boxBody = injectBox<THREE.Mesh>(() => ({
66+
mass: 1,
67+
type: 'Kinematic',
68+
args: this.boxSize,
69+
}));
70+
71+
constructor() {
72+
injectBeforeRender(({ clock }) => {
73+
const t = clock.getElapsedTime();
74+
this.boxBody.api().position.set(Math.sin(t * 2) * 5, Math.cos(t * 2) * 5, 3);
75+
this.boxBody.api().rotation.set(Math.sin(t * 6), Math.cos(t * 6), 0);
76+
});
77+
}
78+
}
79+
80+
@Component({
81+
selector: 'kinematic-plane',
82+
standalone: true,
83+
templateUrl: 'kinematic-plane.html',
84+
imports: [NgtArgs],
85+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
86+
})
87+
class Plane extends NgtSignalStore<{ color: THREE.ColorRepresentation; position: Triplet; rotation: Triplet }> {
88+
@Input({ required: true }) set color(color: THREE.ColorRepresentation) {
89+
this.set({ color });
90+
}
91+
92+
@Input() set position(position: Triplet) {
93+
this.set({ position });
94+
}
95+
96+
@Input() set rotation(rotation: Triplet) {
97+
this.set({ rotation });
98+
}
99+
100+
readonly planeColor = this.select('color');
101+
readonly #position = this.select('position');
102+
readonly #rotation = this.select('rotation');
103+
104+
readonly args = [1000, 1000];
105+
readonly planeBody = injectPlane<THREE.Mesh>(() => ({
106+
args: this.args,
107+
position: this.#position(),
108+
rotation: this.#rotation(),
109+
}));
110+
111+
constructor() {
112+
super({ position: [0, 0, 0], rotation: [0, 0, 0] });
113+
}
114+
}
115+
116+
@Component({
117+
standalone: true,
118+
templateUrl: 'scene.html',
119+
imports: [NgtArgs, NgtcPhysics, Plane, Box, Spheres],
120+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
121+
})
122+
class SceneGraph {
123+
readonly niceColor = niceColor;
124+
}
125+
126+
@Component({
127+
standalone: true,
128+
templateUrl: 'index.html',
129+
imports: [NgtCanvas, NgtsStats],
130+
})
131+
export default class KinematicCube {
132+
readonly scene = SceneGraph;
133+
}

‎apps/sandbox/src/app/pages/kinematic/kinematic-box.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<ngt-mesh [ref]="boxBody.ref" [castShadow]="true" [receiveShadow]="true">
2+
<ngt-box-geometry *args="boxSize" />
3+
<ngt-mesh-physical-material />
4+
</ngt-mesh>

‎apps/sandbox/src/app/pages/kinematic/kinematic-plane.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<ngt-mesh [ref]="planeBody.ref" [receiveShadow]="true">
2+
<ngt-plane-geometry *args="args" />
3+
<ngt-mesh-toon-material [color]="planeColor()" />
4+
</ngt-mesh>

‎apps/sandbox/src/app/pages/kinematic/kinematic-spheres.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<ngt-instanced-mesh
2+
*args="[undefined, undefined, sphereCount()]"
3+
[ref]="sphereBody.ref"
4+
[castShadow]="true"
5+
[receiveShadow]="true"
6+
>
7+
<ngt-sphere-geometry *args="[radius, 16, 16]">
8+
<ngt-instanced-buffer-attribute *args="[colors(), 3]" attach="attributes.color" />
9+
</ngt-sphere-geometry>
10+
<ngt-mesh-phong-material [vertexColors]="true" />
11+
</ngt-instanced-mesh>

‎apps/sandbox/src/app/pages/kinematic/scene.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<ngt-hemisphere-light [intensity]="0.35" />
2+
<ngt-spot-light [position]="[30, 0, 30]" [intensity]="2" [angle]="0.3" [penumbra]="1" [castShadow]="true">
3+
<ngt-vector2 *args="[256, 256]" attach="shadow.mapSize" />
4+
</ngt-spot-light>
5+
<ngt-point-light [position]="[-30, 0, -30]" [intensity]="0.5" />
6+
7+
<ngtc-physics [gravity]="[0, 0, -30]">
8+
<kinematic-plane [color]="niceColor[4]" />
9+
<kinematic-plane [color]="niceColor[1]" [position]="[-6, 0, 0]" [rotation]="[0, 0.9, 0]" />
10+
<kinematic-plane [color]="niceColor[2]" [position]="[6, 0, 0]" [rotation]="[0, -0.9, 0]" />
11+
<kinematic-plane [color]="niceColor[3]" [position]="[0, 6, 0]" [rotation]="[0.9, 0, 0]" />
12+
<kinematic-plane [color]="niceColor[0]" [position]="[0, -6, 0]" [rotation]="[-0.9, 0, 0]" />
13+
<kinematic-box />
14+
<kinematic-spheres />
15+
</ngtc-physics>

0 commit comments

Comments
 (0)