abstract-3d 3.1.2 → 4.0.0-beta.10

package/src/renderers/react/react-mesh.tsx

@@ -1,512 +0,0 @@
-import { Text, Line } from "@react-three/drei";
-import { extend, useThree } from "@react-three/fiber";
-import React, { useMemo } from "react";
-import {
-  BoxGeometry,
-  BufferAttribute,
-  BufferGeometry,
-  CatmullRomCurve3,
-  Color,
-  ConeGeometry,
-  CylinderGeometry,
-  Euler,
-  ExtrudeGeometry,
-  Float32BufferAttribute,
-  FrontSide,
-  Path,
-  PlaneGeometry,
-  Quaternion,
-  Shape,
-  SphereGeometry,
-  TubeGeometry,
-  Vector2,
-  Vector3,
-} from "three";
-import type { Mesh, Box, Plane, Shape as Shape_1, Cylinder, Polygon as A3dPolygon, Tube as A3dTube } from "../../abstract-3d.js";
-import { vec2Scale, isZero } from "../../abstract-3d.js";
-import { addHoles, CircleCurve, CYLINDER_SEGMENTS, cylinderCutPositions, nonZeroHoles } from "../shared/three-geometry.js";
-import { planeGeometry } from "./react-image-material.js";
-
-extend({
-  SphereGeometry,
-  PlaneGeometry,
-  ConeGeometry,
-  Quaternion,
-  Vector3,
-  Euler,
-  BoxGeometry,
-  Path,
-  Shape,
-  TubeGeometry,
-  CatmullRomCurve3,
-  BufferAttribute,
-  ExtrudeGeometry,
-  CylinderGeometry,
-});
-
-const boxGeometry = new BoxGeometry();
-const cylinderGeometries = new Map<string, BufferGeometry>();
-const coneGeometry = new ConeGeometry(1, 1, 16, 1);
-const sphereGeometry = new SphereGeometry(1, 12, 12);
-export const euler = new Euler();
-export const vector3 = new Vector3();
-export const quaternion = new Quaternion();
-
-export function ReactMesh({ mesh, children }: { readonly mesh: Mesh; readonly children?: React.JSX.Element }): React.JSX.Element {
-  const culledLineGeometry = useMemo(() => {
-    const g = new BufferGeometry();
-
-    g.setAttribute("position", new Float32BufferAttribute([0, -1, 0, 0, 1, 0, 1, -1, 0, 1, 1, 0], 3));
-
-    g.setIndex([0, 2, 1, 2, 3, 1]);
-
-    return g;
-  }, []);
-  const { camera, size } = useThree();
-
-  switch (mesh.geometry.type) {
-    case "Box": {
-      const { pos, size, rot, holes } = mesh.geometry;
-      return nonZeroHoles(holes).length === 0 ? (
-        <mesh
-          geometry={boxGeometry}
-          scale={[size.x, size.y, size.z]}
-          position={[pos.x, pos.y, pos.z]}
-          rotation={[rot?.x ?? 0, rot?.y ?? 0, rot?.z ?? 0]}
-          castShadow
-          receiveShadow
-        >
-          {children}
-        </mesh>
-      ) : (
-        <ExcrudeBoxPlane geo={mesh.geometry} sizeZ={size.z}>
-          {children}
-        </ExcrudeBoxPlane>
-      );
-    }
-    case "Cone": {
-      const { pos, radius, rot, length } = mesh.geometry;
-      return (
-        <mesh
-          geometry={coneGeometry}
-          scale={[radius, length, radius]}
-          position={[pos.x, pos.y, pos.z]}
-          rotation={[rot?.x ?? 0, rot?.y ?? 0, rot?.z ?? 0]}
-          castShadow
-          receiveShadow
-        >
-          {children}
-        </mesh>
-      );
-    }
-    case "Cylinder": {
-      const { pos, radius, radiusEnd = radius, rot, length, holes, open, angleStart = 0, angleLength = Math.PI * 2 } = mesh.geometry;
-      const isWhole = isZero(Math.PI * 2 - angleLength);
-      // Holes are extruded along the length, which can't taper
-      if (isWhole && radiusEnd === radius && nonZeroHoles(holes).length > 0) {
-        return <ExcrudeCylinder cyl={mesh.geometry}>{children}</ExcrudeCylinder>;
-      }
-      // Unit geometry scaled by the largest radius, so only the radius ratio needs its own geometry
-      const maxRadius = Math.max(radius, radiusEnd);
-      const unitTop = radiusEnd / (maxRadius || 1);
-      const unitBottom = radius / (maxRadius || 1);
-      const transform = {
-        scale: [maxRadius, length, maxRadius],
-        position: [pos.x, pos.y, pos.z],
-        rotation: [rot?.x ?? 0, rot?.y ?? 0, rot?.z ?? 0],
-      } as const;
-      return isWhole ? (
-        <mesh geometry={getCylinderGeometry(unitTop, unitBottom, open ?? false, 0, Math.PI * 2)} {...transform} castShadow receiveShadow>
-          {children}
-        </mesh>
-      ) : (
-        <mesh {...transform}>
-          <mesh geometry={getCylinderGeometry(unitTop, unitBottom, false, angleStart, angleLength)} castShadow receiveShadow>
-            {children}
-          </mesh>
-          <mesh geometry={getCylinderCutGeometry(unitTop, unitBottom, angleStart, angleLength)} castShadow receiveShadow>
-            {children}
-          </mesh>
-        </mesh>
-      );
-    }
-    case "Image":
-      return (
-        <React.Suspense fallback={null}>
-          <mesh
-            geometry={planeGeometry}
-            scale={[mesh.geometry.size.x, mesh.geometry.size.y, 1]}
-            position={[mesh.geometry.pos.x, mesh.geometry.pos.y, mesh.geometry.pos.z]}
-            rotation={[mesh.geometry.rot?.x ?? 0, mesh.geometry.rot?.y ?? 0, mesh.geometry.rot?.z ?? 0]}
-            castShadow
-            receiveShadow
-          >
-            {children}
-          </mesh>
-        </React.Suspense>
-      );
-    case "Plane": {
-      const { pos, size, rot, holes } = mesh.geometry;
-      return nonZeroHoles(holes).length === 0 ? (
-        <mesh
-          geometry={planeGeometry}
-          scale={[size.x, size.y, 1]}
-          position={[pos.x, pos.y, pos.z]}
-          rotation={[rot?.x ?? 0, rot?.y ?? 0, rot?.z ?? 0]}
-          castShadow
-          receiveShadow
-        >
-          {children}
-        </mesh>
-      ) : (
-        <ExcrudeBoxPlane geo={mesh.geometry} sizeZ={0}>
-          {children}
-        </ExcrudeBoxPlane>
-      );
-    }
-    case "Sphere": {
-      const { pos, radius } = mesh.geometry;
-      return (
-        <mesh geometry={sphereGeometry} scale={radius} position={[pos.x, pos.y, pos.z]} castShadow receiveShadow>
-          {children}
-        </mesh>
-      );
-    }
-    case "Shape":
-      return <ExcrudeShape s={mesh.geometry}>{children}</ExcrudeShape>;
-    case "Text": {
-      const { pos, rot, text, fontSize } = mesh.geometry;
-      return (
-        <React.Suspense fallback={null}>
-          <Text
-            position={[pos.x, pos.y, pos.z]}
-            rotation={[rot?.x ?? 0, rot?.y ?? 0, rot?.z ?? 0]}
-            fontSize={fontSize}
-            textAlign="center"
-            letterSpacing={0.001}
-            lineHeight={1.5}
-            // outlineColor="rgb(255,255,255)"
-            // depthOffset={10}
-            // outlineWidth={3}
-            // outlineOpacity={1}
-          >
-            {children}
-            {text}
-          </Text>
-        </React.Suspense>
-      );
-    }
-    case "Line": {
-      const { start, end, thickness } = mesh.geometry;
-      return (
-        <Line
-          points={[
-            [start.x, start.y, start.z],
-            [end.x, end.y, end.z],
-          ]}
-          lineWidth={thickness}
-          color={mesh.material.normal}
-        >
-          {children}
-        </Line>
-      );
-    }
-    case "CulledLine": {
-      const { start, end, normal, thickness } = mesh.geometry;
-      const color = mesh.material.normal;
-
-      return (
-        <mesh geometry={culledLineGeometry} frustumCulled={false}>
-          <shaderMaterial
-            side={FrontSide}
-            uniforms={{
-              lineStart: { value: new Vector3(start.x, start.y, start.z) },
-              lineEnd: { value: new Vector3(end.x, end.y, end.z) },
-              lineNormal: { value: new Vector3(normal.x, normal.y, normal.z) },
-              thickness: { value: thickness },
-              viewport: { value: new Vector2(size.width, size.height) },
-              nearPlane: { value: camera.near },
-              color: { value: new Color(color) },
-            }}
-            vertexShader={culledLineVertexShader}
-            fragmentShader={culledLineFragmentShader}
-          />
-        </mesh>
-      );
-    }
-    case "Polygon":
-      return <Polygon polygon={mesh.geometry}>{children}</Polygon>;
-    case "Tube":
-      return <Tube tube={mesh.geometry}>{children}</Tube>;
-    default:
-      return <group />;
-  }
-}
-
-function ExcrudeBoxPlane({
-  geo,
-  sizeZ,
-  children,
-}: {
-  readonly geo: Box | Plane;
-  readonly sizeZ: number;
-  readonly children?: React.JSX.Element;
-}): React.JSX.Element {
-  const half = vec2Scale(geo.size, 0.5);
-
-  const excrudeGeometry = React.useMemo(() => {
-    const shape = new Shape();
-    shape.moveTo(-half.x, -half.y).lineTo(-half.x, half.y).lineTo(half.x, half.y).lineTo(half.x, -half.y).closePath();
-    addHoles(geo.holes, shape);
-    return new ExtrudeGeometry(shape, { depth: sizeZ, bevelEnabled: false });
-  }, [geo, half.x, half.y, sizeZ]);
-
-  return (
-    // Doesn't seem to adjust for excrude z size directly???
-    <mesh rotation={[geo.rot?.x ?? 0, geo.rot?.y ?? 0, geo.rot?.z ?? 0]} position={[geo.pos.x, geo.pos.y, geo.pos.z]}>
-      <mesh geometry={excrudeGeometry} position-z={-sizeZ / 2} castShadow receiveShadow>
-        {children}
-      </mesh>
-    </mesh>
-  );
-}
-
-function ExcrudeShape({ s, children }: { readonly s: Shape_1; readonly children?: React.JSX.Element }): React.JSX.Element {
-  const excrudeGeometry = React.useMemo(() => {
-    const shape = new Shape();
-    if (s.points.length > 0) {
-      const p = s.points[0]!;
-      shape.moveTo(p.x, p.y);
-    }
-    for (let i = 1; i < s.points.length; i++) {
-      const p = s.points[i]!;
-      shape.lineTo(p.x, p.y);
-    }
-    shape.closePath();
-    addHoles(s.holes, shape);
-    return new ExtrudeGeometry(shape, { depth: s.thickness, bevelEnabled: false });
-  }, [s]);
-
-  // Doesn't seem to adjust for excrude z size directly???
-  return (
-    <mesh rotation={[s.rot?.x ?? 0, s.rot?.y ?? 0, s.rot?.z ?? 0]} position={[s.pos.x, s.pos.y, s.pos.z]}>
-      <mesh geometry={excrudeGeometry} position-z={-s.thickness / 2} castShadow receiveShadow>
-        {children}
-      </mesh>
-    </mesh>
-  );
-}
-
-function cachedCylinderGeometry(key: string, create: () => BufferGeometry): BufferGeometry {
-  const cached = cylinderGeometries.get(key);
-  if (cached) {
-    return cached;
-  }
-  const geometry = create();
-  cylinderGeometries.set(key, geometry);
-  return geometry;
-}
-
-function getCylinderGeometry(top: number, bottom: number, open: boolean, angleStart: number, angleLength: number): BufferGeometry {
-  return cachedCylinderGeometry(
-    `cyl_${top}_${bottom}_${open}_${angleStart}_${angleLength}`,
-    () => new CylinderGeometry(top, bottom, 1, CYLINDER_SEGMENTS, 1, open, angleStart, angleLength)
-  );
-}
-
-/** The two walls closing an angled cylinder, from the axis out to the rim at angleStart and angleEnd */
-function getCylinderCutGeometry(top: number, bottom: number, angleStart: number, angleLength: number): BufferGeometry {
-  return cachedCylinderGeometry(`cut_${top}_${bottom}_${angleStart}_${angleLength}`, () => {
-    const g = new BufferGeometry();
-    g.setAttribute("position", new Float32BufferAttribute(cylinderCutPositions(top, bottom, 1, angleStart, angleLength), 3));
-    g.computeVertexNormals();
-    return g;
-  });
-}
-
-function ExcrudeCylinder({ cyl, children }: { readonly cyl: Cylinder; readonly children?: React.JSX.Element }): React.JSX.Element {
-  const excrudeGeometry = React.useMemo(() => {
-    const shape = new Shape();
-    shape.moveTo(0, cyl.radius).absellipse(0, 0, cyl.radius, cyl.radius, 0, Math.PI * 2, true);
-    addHoles(cyl.holes, shape);
-    return new ExtrudeGeometry(shape, { depth: cyl.length, bevelEnabled: false });
-  }, [cyl]);
-
-  return (
-    // Doesn't seem to adjust for excrude z size directly???
-    <mesh rotation={[cyl.rot?.x ?? 0, cyl.rot?.y ?? 0, cyl.rot?.z ?? 0]} position={[cyl.pos.x, cyl.pos.y, cyl.pos.z]}>
-      <mesh geometry={excrudeGeometry} rotation-x={Math.PI / 2} position-y={cyl.length / 2} castShadow receiveShadow>
-        {children}
-      </mesh>
-    </mesh>
-  );
-}
-
-function Polygon({ polygon, children }: { readonly polygon: A3dPolygon; readonly children?: React.JSX.Element }): React.JSX.Element {
-  const vertices = React.useMemo(() => {
-    if (polygon.points.length === 4) {
-      const [v0, v1, v2, v3] = polygon.points;
-      return new Float32Array([
-        v0!.x,
-        v0!.y,
-        v0!.z,
-        v1!.x,
-        v1!.y,
-        v1!.z,
-        v2!.x,
-        v2!.y,
-        v2!.z,
-        v2!.x,
-        v2!.y,
-        v2!.z,
-        v3!.x,
-        v3!.y,
-        v3!.z,
-        v0!.x,
-        v0!.y,
-        v0!.z,
-      ]);
-    }
-
-    const flattenedPoints: Array<number> = [];
-    for (const point of polygon.points) {
-      flattenedPoints.push(point.x, point.y, point.z);
-    }
-    const vertexCount = Math.floor(flattenedPoints.length / 3) * 3;
-    const vertices = new Float32Array(vertexCount);
-    for (let i = 0; i < vertexCount; i++) {
-      vertices[i] = flattenedPoints[i] ?? 0.0;
-    }
-    return vertices;
-  }, [polygon]);
-
-  return (
-    <mesh
-      rotation={[polygon.rot?.x ?? 0, polygon.rot?.y ?? 0, polygon.rot?.z ?? 0]}
-      position={[polygon.pos.x, polygon.pos.y, polygon.pos.z]}
-      castShadow
-      receiveShadow
-    >
-      <bufferGeometry key={vertices.join("")} attach="geometry" onUpdate={(self) => self.computeVertexNormals()}>
-        <bufferAttribute attach="attributes-position" needsUpdate={true} args={fakeArgs} array={vertices} count={vertices.length / 3} itemSize={3} />
-      </bufferGeometry>
-      {children}
-    </mesh>
-  );
-}
-
-const fakeArgs = [] as unknown as ConstructorParameters<typeof BufferAttribute>;
-
-function Tube({ tube, children }: { readonly tube: A3dTube; readonly children?: React.JSX.Element }): React.JSX.Element {
-  const tubeGeometry = React.useMemo(() => {
-    return new TubeGeometry(
-      tube.curve.type === "SplineCurve"
-        ? new CatmullRomCurve3(tube.curve.points.map((p) => new Vector3(p.x, p.y, p.z)))
-        : new CircleCurve(tube.curve),
-      9,
-      tube.radius,
-      9,
-      false
-    );
-  }, [tube]);
-
-  return (
-    <mesh
-      rotation={[tube.rot?.x ?? 0, tube.rot?.y ?? 0, tube.rot?.z ?? 0]}
-      position={[tube.pos.x, tube.pos.y, tube.pos.z]}
-      geometry={tubeGeometry}
-      castShadow
-      receiveShadow
-    >
-      {children}
-    </mesh>
-  );
-}
-
-const culledLineVertexShader = `
-  uniform vec3 lineStart;
-  uniform vec3 lineEnd;
-  uniform vec3 lineNormal;
-
-  uniform float thickness;
-  uniform float nearPlane;
-  uniform vec2 viewport;
-
-  void main() {
-    vec3 a = (modelViewMatrix * vec4(lineStart, 1.0)).xyz;
-    vec3 b = (modelViewMatrix * vec4(lineEnd, 1.0)).xyz;
-
-    vec3 n = normalize(mat3(modelViewMatrix) * lineNormal);
-
-    // camera is at (0,0,0) in view space.
-    vec3 mid = (a + b) * 0.5;
-    vec3 toCamera = normalize(-mid);
-
-    bool frontFacing = dot(n, toCamera) > 0.0;
-
-    if(!frontFacing) {
-      // collapse all 4 vertices to one point.
-      gl_Position = vec4(0.0);
-      return;
-    }
-
-    // ---- near-plane clipping ----
-
-    float nearZ = -nearPlane;
-
-    bool aBehind = a.z > nearZ;
-    bool bBehind = b.z > nearZ;
-
-    if(aBehind && bBehind) {
-      gl_Position = vec4(0.0);
-      return;
-    }
-
-    if(aBehind) {
-      float t = (nearZ - a.z) / (b.z - a.z);
-      a = mix(a, b, t);
-    }
-
-    if(bBehind) {
-      float t = (nearZ - b.z) / (a.z - b.z);
-      b = mix(b, a, t);
-    }
-
-    vec4 ca = projectionMatrix * vec4(a, 1.0);
-    vec4 cb = projectionMatrix * vec4(b, 1.0);
-
-    vec2 aNdc = ca.xy / ca.w;
-    vec2 bNdc = cb.xy / cb.w;
-
-    vec2 aPx = aNdc * viewport * 0.5;
-    vec2 bPx = bNdc * viewport * 0.5;
-
-    vec2 delta = bPx - aPx;
-    float len = length(delta);
-
-    if(len < 0.0001) {
-      gl_Position = vec4(0.0);
-      return;
-    }
-
-    vec2 dir = delta / len;
-    vec2 perp = vec2(-dir.y, dir.x);
-
-    float endpoint = position.x;
-    float side = position.y;
-
-    vec4 clip = mix(ca, cb, endpoint);
-
-    vec2 offsetNdc = perp * side * (thickness * 0.5) * (2.0 / viewport);
-    clip.xy += offsetNdc * clip.w;
-    gl_Position = clip;
-  }
-`;
-
-const culledLineFragmentShader = `
-  uniform vec3 color;
-
-  void main() {
-    gl_FragColor = vec4(color, 1.0);
-  }
-`;

package/src/renderers/react/react-relation.tsx

@@ -1,86 +0,0 @@
-import type { ThreeEvent } from "@react-three/fiber";
-import React from "react";
-import type { Group, Relation } from "../../abstract-3d.js";
-import { vec3Scale } from "../../abstract-3d.js";
-import { ReactMaterial } from "./react-material.js";
-import { ReactMesh } from "./react-mesh.js";
-
-const outlineMat = { normal: "rgb(0, 0, 0)", opacity: 1.0 };
-
-/** The shape of each active relation, e.g. where a component can be inserted on an air relation, clickable and darker when hovered */
-export const ReactRelations = React.memo(
-  ({
-    relations,
-    activeRelations,
-    onClickRelation,
-  }: {
-    readonly relations: ReadonlyArray<Relation> | undefined;
-    readonly activeRelations: ReadonlyArray<string> | undefined;
-    readonly onClickRelation?: (relation: Relation, e: ThreeEvent<MouseEvent>) => void;
-  }): React.JSX.Element => (
-    <>
-      {relations
-        ?.filter((r) => activeRelations?.includes(r.id))
-        .map((r) => (
-          <ReactRelation key={r.id} relation={r} onClickRelation={onClickRelation} />
-        ))}
-    </>
-  )
-);
-
-function ReactRelation({
-  relation,
-  onClickRelation,
-}: {
-  readonly relation: Relation;
-  readonly onClickRelation?: (relation: Relation, e: ThreeEvent<MouseEvent>) => void;
-}): React.JSX.Element {
-  const [hovered, setHovered] = React.useState<boolean>(false);
-  return (
-    <group
-      onClick={(e) => {
-        if (onClickRelation) {
-          e.stopPropagation();
-          onClickRelation(relation, e);
-        }
-      }}
-      onPointerOver={(e) => {
-        e.stopPropagation();
-        document.body.style.cursor = "pointer";
-        setHovered(true);
-      }}
-      onPointerOut={() => {
-        document.body.style.cursor = "auto";
-        setHovered(false);
-      }}
-      onContextMenu={(e) => e.stopPropagation()}
-    >
-      {relation.groups?.map((g, i) => (
-        <ReactRelationGroup key={i} g={g} hovered={hovered} />
-      ))}
-    </group>
-  );
-}
-
-/** A group of a relation's shape, unlit, with a black outline around its boxes */
-function ReactRelationGroup({ g, hovered }: { readonly g: Group; readonly hovered: boolean }): React.JSX.Element {
-  return (
-    <group position={[g.pos.x, g.pos.y, g.pos.z]} rotation={[g.rot?.x ?? 0, g.rot?.y ?? 0, g.rot?.z ?? 0]}>
-      {g.meshes?.map((m, i) => (
-        <React.Fragment key={i}>
-          <ReactMesh mesh={m}>
-            <ReactMaterial isText={false} isRelation={true} material={m.material} hovered={hovered} />
-          </ReactMesh>
-          {m.geometry.type === "Box" && (
-            <ReactMesh mesh={{ ...m, geometry: { ...m.geometry, size: vec3Scale(m.geometry.size, 1.0125) } }}>
-              <ReactMaterial isText={false} isRelation={true} drawBackOnly={true} material={outlineMat} hovered={hovered} />
-            </ReactMesh>
-          )}
-        </React.Fragment>
-      ))}
-      {g.groups?.map((c, i) => (
-        <ReactRelationGroup key={i} g={c} hovered={hovered} />
-      ))}
-    </group>
-  );
-}

package/src/renderers/react/react-scene.tsx

@@ -1,111 +0,0 @@
-import { Html } from "@react-three/drei";
-import type { ThreeEvent } from "@react-three/fiber";
-import React from "react";
-import type { Scene, Group, Relation } from "../../abstract-3d.js";
-import { ReactDimensions } from "./react-dimension.js";
-import { ReactGroup } from "./react-group.js";
-import type { MaterialState } from "./react-material.js";
-import { ReactRelations } from "./react-relation.js";
-import type { ReactPopover } from "./react-types.js";
-
-export type SceneMouseEvent = ThreeEvent<MouseEvent>;
-
-export function ReactScene({
-  scene,
-  selectedIds,
-  hoveredIdsExternal,
-  activeRelations,
-  activeComponents,
-  showDimensions,
-  useAlphaTest,
-  materialStateImages,
-  reactPopovers,
-  onClickGroup,
-  onHoverGroup,
-  onContextMenuGroup,
-  getTooltips,
-  onClickRelation,
-  createGroupKey,
-  createGroupId,
-}: {
-  readonly scene: Scene;
-  readonly selectedIds: Record<string, boolean> | undefined;
-  readonly hoveredIdsExternal: ReadonlyArray<string> | undefined;
-  readonly activeRelations: ReadonlyArray<string> | undefined;
-  readonly activeComponents: Record<string, MaterialState> | undefined;
-  readonly showDimensions: boolean;
-  readonly useAlphaTest?: boolean;
-  readonly materialStateImages?: Record<string, string>;
-  readonly reactPopovers?: ReadonlyArray<ReactPopover>;
-  readonly onClickGroup?: (
-    id: string | undefined,
-    rootData: Record<string, string> | undefined,
-    data: Record<string, string> | undefined,
-    e: SceneMouseEvent
-  ) => void;
-  readonly onHoverGroup?: (
-    id: string | undefined,
-    rootData: Record<string, string> | undefined,
-    data: Record<string, string> | undefined,
-    e: SceneMouseEvent
-  ) => void;
-  readonly onContextMenuGroup?: (
-    id: string,
-    rootData: Record<string, string> | undefined,
-    data: Record<string, string> | undefined,
-    left: number,
-    top: number,
-    e: SceneMouseEvent
-  ) => void;
-  readonly getTooltips?: (id: string) => ReadonlyArray<ReactPopover>;
-  readonly onClickRelation?: (relation: Relation, e: SceneMouseEvent) => void;
-  readonly createGroupKey?: (g: Group, idx: number, rootData: Record<string, string> | undefined, id: string) => string;
-  readonly createGroupId?: (g: Group) => string;
-}): React.JSX.Element {
-  return (
-    <group
-      rotation={[scene.rotation_deprecated?.x ?? 0, scene.rotation_deprecated?.y ?? 0, scene.rotation_deprecated?.z ?? 0]}
-      position={[-(scene.center_deprecated?.x ?? 0), -(scene.center_deprecated?.y ?? 0), -(scene.center_deprecated?.z ?? 0)]}
-    >
-      {scene.groups.map((g, i) => {
-        const id = createGroupId ? createGroupId(g) : "";
-        return (
-          <ReactGroup
-            key={createGroupKey ? createGroupKey(g, 0, g.data, id) : i}
-            g={g}
-            selectedIds={selectedIds}
-            relationsActive={activeRelations !== undefined}
-            activeComponents={activeComponents}
-            materialStateImages={materialStateImages}
-            hoveredIdsExternal={hoveredIdsExternal}
-            onClickGroup={onClickGroup}
-            onHoverGroup={onHoverGroup}
-            onContextMenuGroup={onContextMenuGroup}
-            getTooltips={getTooltips}
-            createGroupKey={createGroupKey}
-            id={id}
-            useAlphaTest={useAlphaTest}
-            rootData={g.data}
-          />
-        );
-      })}
-      <ReactDimensions
-        dimensions={scene.dimensions_deprecated}
-        showDimensions={showDimensions}
-        sceneRotation={scene.rotation_deprecated}
-        sceneCenter={scene.center_deprecated}
-        selectedIds={selectedIds}
-        relationsActive={activeRelations !== undefined}
-        onClickGroup={onClickGroup}
-        onHoverGroup={onHoverGroup}
-        onContextMenuGroup={onContextMenuGroup}
-      />
-      <ReactRelations relations={scene.relations} activeRelations={activeRelations} onClickRelation={onClickRelation} />
-      {reactPopovers?.map((p) => (
-        <Html key={p.id} position={[p.pos.x, p.pos.y, p.pos.z]} center pointerEvents="none" style={{ pointerEvents: "none" }}>
-          {p.content}
-        </Html>
-      ))}
-    </group>
-  );
-}