feat: auto remove default camera

Author: krsbx

.gitignore

@@ -15,6 +15,8 @@ dist-ssr
 package-lock.json
 .eslintcache
 
+aframe-react-component-*.tgz
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aframe-react-component",
-  "version": "0.1.0beta2a",
+  "version": "0.1.0-beta2b",
   "main": "dist/index.js",
   "scripts": {
     "dev": "vite",

src/components/Scene.tsx

@@ -1,10 +1,21 @@
-import React from 'react';
+import _ from 'lodash';
+import React, { useEffect, useRef } from 'react';
 import { Scene as AScene } from 'aframe';
-import { convertObjectToString } from '../utils/common';
+import { convertObjectToString, mergeRefs } from '../utils/common';
 import { Scene as _Scene } from '../utils/interface';
 
 const Scene = React.forwardRef<AScene, _Scene>(({ children, ...props }, ref) => {
   const { vrModeUI, orientationUI, colorSpace, ...rest } = props;
+  const sceneRef = useRef<AScene>(null);
+
+  useEffect(() => {
+    const defaultCamera = sceneRef.current?.querySelectorAll('[camera]');
+
+    // Remove default camera that Aframe add automatically, if user add a camera
+    if (!_.isNil(defaultCamera) && defaultCamera.length > 1) {
+      _.last(defaultCamera)?.remove();
+    }
+  }, []);
 
   return React.createElement(
     'a-scene',
@@ -13,7 +24,7 @@ const Scene = React.forwardRef<AScene, _Scene>(({ children, ...props }, ref) =>
       ...(colorSpace && { 'color-space': colorSpace }),
       'vr-mode-ui': `enabled: ${vrModeUI ?? false}`,
       'device-orientation-permission-ui': `enabled: ${orientationUI ?? false}`,
-      ref,
+      ref: mergeRefs(sceneRef, ref),
     },
     children
   );

src/utils/common.ts

@@ -100,3 +100,28 @@ export const getAframeProps = (props: Record<any, any>): string => {
 
   return _.map(props, (value: string | boolean, key: string) => `${key}: ${value}`).join('; ');
 };
+
+/**
+ * Join multiple ref
+ * @param refs
+ * @returns multiple refs that can be use
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const mergeRefs = (...refs: any[]) => {
+  const filteredRefs = refs.filter(Boolean);
+
+  if (!filteredRefs.length) return null;
+
+  if (filteredRefs.length === 0) return filteredRefs[0];
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (inst: any) => {
+    for (const ref of filteredRefs) {
+      if (typeof ref === 'function') {
+        ref(inst);
+      } else if (ref) {
+        ref.current = inst;
+      }
+    }
+  };
+};