fix(core): make sure renderer work correctly for two DOMs elements that might contain THREE children

Author: nartc

Diff for: apps/sandbox/src/app/app.component.ts

@@ -1,6 +1,10 @@
 import { NgIf } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, Component, computed, signal } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, Component, Input, computed, signal } from '@angular/core';
+import { Triplet } from '@pmndrs/cannon-worker-api';
 import { NgtArgs, NgtCanvas, extend } from 'angular-three';
+import { NgtcPhysics } from 'angular-three-cannon';
+import { NgtcDebug } from 'angular-three-cannon/debug';
+import { injectBox, injectPlane } from 'angular-three-cannon/services';
 import { NgtpBloom, NgtpEffectComposer } from 'angular-three-postprocessing';
 import { NgtsGrid } from 'angular-three-soba/abstractions';
 import { NgtsOrbitControls } from 'angular-three-soba/controls';
@@ -10,6 +14,82 @@ import * as THREE from 'three';
 
 extend(THREE);
 
+@Component({
+	selector: 'app-plane',
+	standalone: true,
+	template: `
+		<ngt-mesh [ref]="planeApi.ref" [receiveShadow]="true">
+			<ngt-plane-geometry *args="[1000, 1000]" />
+			<ngt-mesh-standard-material color="#171717" />
+		</ngt-mesh>
+	`,
+	imports: [NgtArgs],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class Plane {
+	Math = Math;
+	@Input() position = [0, 0, 0];
+
+	planeApi = injectPlane(() => ({ mass: 0, position: this.position as Triplet, args: [1000, 1000] }));
+}
+
+@Component({
+	selector: 'app-box',
+	standalone: true,
+	template: `
+		<ngt-mesh [ref]="boxApi.ref" [receiveShadow]="true" [castShadow]="true">
+			<ngt-box-geometry *args="[2, 2, 2]" />
+			<ngt-mesh-standard-material [roughness]="0.5" color="#575757" />
+		</ngt-mesh>
+	`,
+	imports: [NgtArgs],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class Box {
+	@Input() position = [0, 0, 0];
+
+	boxApi = injectBox(() => ({ mass: 10000, position: this.position as Triplet, args: [2, 2, 2] }));
+}
+
+@Component({
+	standalone: true,
+	template: `
+		<ngt-point-light [position]="[-10, -10, 30]" [intensity]="0.25 * Math.PI" />
+		<ngt-spot-light
+			[intensity]="0.3 * Math.PI"
+			[position]="[30, 30, 50]"
+			[angle]="0.2"
+			[penumbra]="1"
+			[castShadow]="true"
+		/>
+		<ngtc-physics [gravity]="[0, 0, -25]" [iterations]="10">
+			<ngtc-debug color="white" [disabled]="true">
+				<app-plane [position]="[0, 0, -10]" />
+				<app-plane *ngIf="showPlane()" />
+				<app-box [position]="[1, 0, 1]" />
+				<app-box [position]="[2, 1, 5]" />
+				<app-box [position]="[0, 0, 6]" />
+				<app-box [position]="[-1, 1, 8]" />
+				<app-box [position]="[-2, 2, 13]" />
+				<app-box [position]="[2, -1, 13]" />
+				<app-box *ngIf="!showPlane()" [position]="[0.5, 1.0, 20]" />
+			</ngtc-debug>
+		</ngtc-physics>
+	`,
+	imports: [Box, Plane, NgtcPhysics, NgIf, NgtcDebug],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class CannonScene {
+	Math = Math;
+	showPlane = signal(true);
+
+	ngOnInit() {
+		setTimeout(() => {
+			this.showPlane.set(false);
+		}, 5000);
+	}
+}
+
 @Component({
 	standalone: true,
 	template: `
@@ -48,8 +128,15 @@ export class Scene {
 	standalone: true,
 	imports: [NgtCanvas, NgIf],
 	selector: 'sandbox-root',
-	template: ` <ngt-canvas [sceneGraph]="Scene" [camera]="{ position: [0, 1, 3] }" /> `,
+	template: `
+		<ngt-canvas
+			[sceneGraph]="Scene"
+			[camera]="{ position: [0, 0, 15] }"
+			[shadows]="true"
+			[gl]="{ useLegacyLights: true }"
+		/>
+	`,
 })
 export class AppComponent {
-	readonly Scene = Scene;
+	readonly Scene = CannonScene;
 }

Diff for: libs/cannon/debug/src/lib/debug.ts

@@ -1,7 +1,7 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, forwardRef, Input, type OnInit } from '@angular/core';
 import { propsToBody, type BodyProps, type BodyShapeType } from '@pmndrs/cannon-worker-api';
 import { createInjectionToken, injectBeforeRender, NgtArgs } from 'angular-three';
-import { injectNgtcPhysicsApi, provideNgtcPhysicsApi } from 'angular-three-cannon';
+import { injectNgtcPhysicsApi } from 'angular-three-cannon';
 import type { Body, Quaternion as CQuarternion, Vec3, World } from 'cannon-es';
 import CannonDebugger from 'cannon-es-debugger';
 import * as THREE from 'three';
@@ -31,7 +31,7 @@ export const [injectNgtcDebugApi, provideNgtcDebugApi] = createInjectionToken((d
 		<ngt-primitive *args="[scene]" />
 		<ng-content />
 	`,
-	providers: [provideNgtcPhysicsApi()],
+	providers: [provideNgtcDebugApi()],
 	imports: [NgtArgs],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })

Diff for: libs/cannon/services/src/lib/body.ts

@@ -248,15 +248,15 @@ function injectBody<TBodyProps extends BodyProps, TObject extends THREE.Object3D
 			// register deps
 			deps();
 
+			const currentWorker = worker();
+			if (!currentWorker) return;
+
 			if (!bodyRef.nativeElement) {
 				bodyRef.nativeElement = new THREE.Object3D() as TObject;
 				return;
 			}
 
 			const object = bodyRef.nativeElement;
-			const currentWorker = worker();
-
-			if (!currentWorker) return;
 
 			const objectCount =
 				object instanceof THREE.InstancedMesh

Diff for: libs/core/src/lib/renderer/index.ts

@@ -191,8 +191,15 @@ class NgtRenderer implements Renderer2 {
 			pRS[NgtRendererClassId.type] === 'dom' &&
 			(newChild instanceof Text || cRS[NgtRendererClassId.type] === 'dom')
 		) {
+			this.store.setParent(newChild, parent);
 			this.store.addChild(parent, newChild);
 			this.delegate.appendChild(parent, newChild);
+			if (this.shouldFindGrandparentInstance(pRS, cRS, newChild)) {
+				// we'll try to get the grandparent instance here so that we can run appendChild with both instances
+				const closestGrandparentInstance = this.store.getClosestParentWithInstance(parent);
+				if (closestGrandparentInstance) this.appendChild(closestGrandparentInstance, newChild);
+				return;
+			}
 			return;
 		}
 

Diff for: libs/core/src/lib/renderer/store.ts

@@ -416,7 +416,10 @@ export class NgtRendererStore {
 		rS[NgtRendererClassId.parent] = null;
 		for (const renderChild of rS[NgtRendererClassId.children] || []) {
 			if (renderChild.__ngt_renderer__?.[NgtRendererClassId.type] === 'three' && parent) {
-				removeThreeChild(parent, renderChild, true);
+				const closestInstance = this.getClosestParentWithInstance(parent);
+				if (closestInstance) {
+					removeThreeChild(closestInstance, renderChild, true);
+				}
 			}
 			this.destroy(renderChild, parent);
 		}

Diff for: libs/core/src/lib/renderer/utils.ts

@@ -124,8 +124,8 @@ export function removeThreeChild(parent: NgtInstanceNode, child: NgtInstanceNode
 	});
 
 	// remove child from parent
-	if (untracked(pLS.objects)) pLS.remove(child, 'objects');
-	if (untracked(pLS.nonObjects)) pLS.remove(child, 'nonObjects');
+	if (pLS.objects && untracked(pLS.objects)) pLS.remove(child, 'objects');
+	if (pLS.nonObjects && untracked(pLS.nonObjects)) pLS.remove(child, 'nonObjects');
 
 	if (cLS.attach) {
 		detach(parent, child, cLS.attach);