All files / src/components/VirtualWalkthrough BoundaryRing.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { useEffect } from 'react';
 
import { Entity } from '@playcanvas/react';
import { Script } from '@playcanvas/react/components';
import { useApp } from '@playcanvas/react/hooks';
import { Vec3 } from 'playcanvas';
 
import { BoundaryRingScript } from './boundary-ring';
 
export type BoundaryRingProps = {
  center: Vec3;
  radius: number;
  groundPlane: Vec3[];
};
 
const BoundaryRing = ({ center, radius, groundPlane }: BoundaryRingProps) => {
  const app = useApp();
 
  useEffect(() => {
    // Set imperatively rather than via reactive Script props. @playcanvas/react wraps Script
    // in memo() whose shallowEquals returns early on the first prop with a .equals() method
    // (Vec3), so any prop after a Vec3 is never compared and would not propagate.
    // @ts-expect-error - scripts are added dynamically to the entity
    const script = app.root.findByName('boundary-ring')?.script?.boundaryRing;
    if (script) {
      script.center = center;
      script.radius = radius;
      script.groundPlane = groundPlane;
      script.rebuild();
    }
  }, [app, center, radius, groundPlane]);
 
  return (
    <Entity name='boundary-ring'>
      <Script script={BoundaryRingScript} />
    </Entity>
  );
};
 
export default BoundaryRing;