1
import { NgtCanvas } from'angular-three/dom';
2
import { SceneGraph } from'./scene-graph';
3
4
@Component({
5
template: `
6
<ngt-canvas>
7
<app-scene-graph*canvasContent />
8
</ngt-canvas>
9
`,
10
imports: [NgtCanvas, SceneGraph]
11
})
12
exportclassSimpleScene {}

1
import { extend, beforeRender } from'angular-three';
2
import { Mesh, BoxGeometry, MeshNormalMaterial } from'three';
3
4
@Component({
5
selector: 'app-scene-graph',
6
template: `
7
<ngt-mesh#mesh
8
[scale]="scale()"
9
(pointerover)="scale.set(1.5)"
10
(pointerout)="scale.set(1)"
11
>
12
<ngt-box-geometry />
13
<ngt-mesh-normal-material />
14
</ngt-mesh>
15
`,
16
schemas: [CUSTOM_ELEMENTS_SCHEMA],
17
})
18
exportclassSceneGraph {
19
private meshRef = viewChild.required<ElementRef<Mesh>>('mesh');
20
21
protected scale =signal(1);
22
23
constructor() {
24
extend({ Mesh, BoxGeometry, MeshNormalMaterial });
25
26
beforeRender(()=> {
27
constmesh = this.meshRef().nativeElement;
28
mesh.rotation.x+=0.01;
29
mesh.rotation.y+=0.01;
30
});
31
}
32
}

1
import { ChangeDetectionStrategy, Component } from'@angular/core';
2
import { NgtCanvas } from'angular-three/dom';
3
import { SceneGraph } from'../hud/scene-graph';
4
5
@Component({
6
selector: 'rapier-demo',
7
template: `
8
<ngt-canvas[camera]="{ position: [-1, 5, 5], fov: 45 }"shadows>
9
<app-scene-graph*canvasContent />
10
</ngt-canvas>
11
`,
12
imports: [NgtCanvas, SceneGraph],
13
changeDetection: ChangeDetectionStrategy.OnPush,
14
})
15
exportclassRapierDemo {}

1
import {
2
ChangeDetectionStrategy,
3
Component,
4
CUSTOM_ELEMENTS_SCHEMA,
5
input,
6
} from"@angular/core";
7
import { NgtArgs, type NgtVector3 } from"angular-three";
8
import { NgtrCuboidCollider, NgtrPhysics, NgtrRigidBody } from"angular-three-rapier";
9
import*as THREE from"three";
10
11
@Component({
12
selector: "app-floor",
13
template: `
14
<ngt-object3DrigidBody="fixed"[options]="{ colliders: false }"[position]="[0, -1, 0]"[rotation]="[-Math.PI / 2, 0, 0]">
15
<ngt-meshreceiveShadow>
16
<ngt-plane-geometry*args="[50, 50]" />
17
<ngt-shadow-material[opacity]="0.5" />
18
</ngt-mesh>
19
20
<ngt-object3D[cuboidCollider]="[1000, 1000, 0]" />
21
</ngt-object3D>
22
`,
23
imports: [NgtrRigidBody, NgtrCuboidCollider, NgtArgs],
24
changeDetection: ChangeDetectionStrategy.OnPush,
25
schemas: [CUSTOM_ELEMENTS_SCHEMA],
26
})
27
exportclassFloor {
28
protectedreadonly Math = Math;
29
}
30
31
@Component({
32
selector: "app-box",
33
template: `
34
<ngt-object3DrigidBody[position]="position()"[rotation]="[0.4, 0.2, 0.5]">
35
<ngt-meshcastShadowreceiveShadow>
36
<ngt-box-geometry />
37
<ngt-mesh-standard-material[roughness]="0.5"color="#E3B6ED" />
38
</ngt-mesh>
39
</ngt-object3D>
40
`,
41
imports: [NgtrRigidBody],
42
changeDetection: ChangeDetectionStrategy.OnPush,
43
schemas: [CUSTOM_ELEMENTS_SCHEMA],
44
})
45
exportclassBox {
46
position =input<NgtVector3>([0, 5, 0]);
47
}
48
49
@Component({
50
selector: "app-scene-graph",
51
template: `
52
<ngt-point-light[position]="[-10, -10, 30]"[intensity]="0.25 * Math.PI"[decay]="0" />
53
<ngt-spot-light[intensity]="0.3 * Math.PI"[position]="[30, 30, 50]"[angle]="0.2"[penumbra]="1"[decay]="0"castShadow />
54
55
<ngtr-physics[options]="{ debug: true }">
56
<ng-template>
57
<app-floor />
58
@for (positionof positions; track $index) {
59
<app-box[position]="position" />
60
}
61
</ng-template>
62
</ngtr-physics>
63
`,
64
imports: [NgtArgs, NgtrPhysics, Floor, Box],
65
changeDetection: ChangeDetectionStrategy.OnPush,
66
schemas: [CUSTOM_ELEMENTS_SCHEMA],
67
})
68
exportclassSceneGraph {
69
protectedreadonly Math = Math;
70
protected positions:NgtVector3[] = [
71
[0.1, 5, 0],
72
[0, 10, -1],
73
[0, 20, -2],
74
];
75
}

1
import { ChangeDetectionStrategy, Component } from"@angular/core";
2
import { NgtCanvas } from"angular-three/dom";
3
import { SceneGraph } from"./scene-graph";
4
5
@Component({
6
template: `
7
<ngt-canvas>
8
<app-scene-graph*canvasContent />
9
</ngt-canvas>
10
11
<spanclass="font-mono absolute bottom-0 right-0 text-sm">
12
* click/hover the cube
13
</span>
14
`,
15
host: {
16
class: "relative flex h-full",
17
},
18
imports: [NgtCanvas, SceneGraph],
19
changeDetection: ChangeDetectionStrategy.OnPush,
20
})
21
exportclassPointerDemo {}

1
import { DOCUMENT } from"@angular/common";
2
import {
3
ChangeDetectionStrategy,
4
Component,
5
CUSTOM_ELEMENTS_SCHEMA,
6
Directive,
7
ElementRef,
8
inject,
9
signal,
10
viewChild,
11
} from"@angular/core";
12
import { extend, beforeRender, objectEvents } from"angular-three";
13
import { NgtsEnvironment } from"angular-three-soba/staging";
14
import*as THREE from"three";
15
16
@Directive({ selector: "ngt-mesh[cursor]" })
17
exportclassCursor {
18
constructor() {
19
constdocument = inject(DOCUMENT);
20
constelementRef = inject<ElementRef<THREE.Mesh>>(ElementRef);
21
constnativeElement = elementRef.nativeElement;
22
23
if (nativeElement.isMesh) {
24
objectEvents(()=> nativeElement, {
25
pointerover: ()=> {
26
document.body.style.cursor="pointer";
27
},
28
pointerout: ()=> {
29
document.body.style.cursor="default";
30
},
31
});
32
}
33
}
34
}
35
36
@Component({
37
selector: "app-scene-graph",
38
template: `
39
<ngt-mesh
40
#mesh
41
cursor
42
[scale]="scale()"
43
(pointerover)="hovered.set(true)"
44
(pointerout)="hovered.set(false)"
45
(click)="scale.set(scale() === 2 ? 3 : 2)"
46
>
47
<ngt-box-geometry />
48
<ngt-mesh-standard-material
49
[color]="hovered() ? 'mediumpurple' : 'maroon'"
50
[roughness]="0.5"
51
[metalness]="0.5"
52
/>
53
</ngt-mesh>
54
55
<ngts-environment[options]="{ preset: 'warehouse' }" />
56
`,
57
imports: [Cursor, NgtsEnvironment],
58
changeDetection: ChangeDetectionStrategy.OnPush,
59
schemas: [CUSTOM_ELEMENTS_SCHEMA],
60
})
61
exportclassSceneGraph {
62
private meshRef = viewChild.required<ElementRef<THREE.Mesh>>("mesh");
63
64
protected hovered =signal(false);
65
protected scale =signal(2);
66
67
constructor() {
68
extend(THREE);
69
70
beforeRender(({ delta })=> {
71
constmesh = this.meshRef().nativeElement;
72
mesh.rotation.x+= delta;
73
mesh.rotation.y+= delta;
74
});
75
}
76
}

1
import { ChangeDetectionStrategy, Component } from'@angular/core';
2
import { NgtCanvas } from'angular-three/dom';
3
import { SceneGraph } from'./scene-graph';
4
5
@Component({
6
selector: 'app-gltf-demo-home',
7
template: `
8
<ngt-canvas[camera]="{ fov: 75, position: [0, 2, 3] }">
9
<app-scene-graph*canvasContent />
10
</ngt-canvas>
11
`,
12
imports: [NgtCanvas, SceneGraph],
13
changeDetection: ChangeDetectionStrategy.OnPush,
14
})
15
exportdefaultclassGLTFDemoHome {}

1
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from'@angular/core';
2
import { NgtArgs } from'angular-three';
3
import { NgtsOrbitControls } from'angular-three-soba/controls';
4
import { Bot } from'./bot';
5
6
@Component({
7
selector: 'app-scene-graph',
8
template: `
9
<ngt-color*args="['#303030']"attach="background" />
10
11
<ngt-grid-helper*args="[10, 20]" />
12
13
<app-bot[positionX]="0.75"[rotationY]="-Math.PI / 2"[bodyTexture]="1" />
14
<app-bot[positionX]="-0.75"[rotationY]="Math.PI / 2"[bodyTexture]="2" />
15
16
<ngts-orbit-controls[options]="{ enableZoom: false, enablePan: false }" />
17
`,
18
imports: [NgtArgs, Bot, NgtsOrbitControls],
19
schemas: [CUSTOM_ELEMENTS_SCHEMA],
20
changeDetection: ChangeDetectionStrategy.OnPush,
21
})
22
exportclassSceneGraph {
23
protectedreadonly Math = Math;
24
}

1
import { ChangeDetectionStrategy, Component, computed, CUSTOM_ELEMENTS_SCHEMA, effect, input } from'@angular/core';
2
import { NgtArgs } from'angular-three';
3
import { gltfResource } from'angular-three-soba/loaders';
4
import { animations, type NgtsAnimationClips } from'angular-three-soba/misc';
5
import { matcapTextureResource } from'angular-three-soba/staging';
6
import*as THREE from'three';
7
import { SkeletonUtils, type GLTF } from'three-stdlib';
8
9
import botGLB from'@common-assets/ybot.glb'with { loader: 'file' };
10
11
type BotGLTF =GLTF& {
12
animations:NgtsAnimationClips<'Dance'>[];
13
};
14
15
const bodies = {
16
1: '312D20_80675C_8B8C8B_85848C',
17
2: '5B4CBC_B59AF2_9B84EB_8F78E4',
18
};
19
20
@Component({
21
selector: 'app-bot',
22
template: `
23
<ngt-primitive*args="[scene()]"[position.x]="positionX()"[rotation.y]="rotationY()" />
24
`,
25
imports: [NgtArgs],
26
schemas: [CUSTOM_ELEMENTS_SCHEMA],
27
changeDetection: ChangeDetectionStrategy.OnPush,
28
})
29
exportclassBot {
30
protectedreadonly Math = Math;
31
32
positionX =input(0);
33
rotationY =input(0);
34
bodyTexture = input.required<1|2>();
35
36
private gltf =gltfResource<BotGLTF>(()=> botGLB);
37
private matcapBody =matcapTextureResource(()=> bodies[this.bodyTexture()], {
38
onLoad: (texture)=> {
39
texture.colorSpace=THREE.SRGBColorSpace;
40
},
41
});
42
private matcapJoints =matcapTextureResource(()=>'394641_B1A67E_75BEBE_7D7256', {
43
onLoad: (texture)=> {
44
texture.colorSpace=THREE.SRGBColorSpace;
45
},
46
});
47
48
protected scene =computed(()=> {
49
constgltf = this.gltf.value();
50
if (!gltf) returnnull;
51
const [matcapBody, matcapJoints] = [this.matcapBody.resource.value(), this.matcapJoints.resource.value()];
52
if (!matcapBody ||!matcapJoints) returnnull;
53
54
constscene = SkeletonUtils.clone(gltf.scene);
55
56
constbody = scene.getObjectByName('YB_Body') as THREE.SkinnedMesh;
57
constjoints = scene.getObjectByName('YB_Joints') as THREE.SkinnedMesh;
58
59
if (!body ||!joints) return scene;
60
61
body.material=newTHREE.MeshMatcapMaterial({ matcap: matcapBody });
62
joints.material=newTHREE.MeshMatcapMaterial({ matcap: matcapJoints });
63
return scene;
64
});
65
66
private animations =animations(this.gltf.value, this.scene);
67
68
constructor() {
69
effect(()=> {
70
if (!this.animations.isReady) return;
71
this.animations.actions.Dance.reset().fadeIn(0.5).play();
72
});
73
}
74
}