diff --git a/.gitignore b/.gitignore index 51023f5..12a9b75 100644 --- a/.gitignore +++ b/.gitignore @@ -15,6 +15,8 @@ dist-ssr package-lock.json .eslintcache +aframe-react-component-*.tgz + # Editor directories and files .vscode/* !.vscode/extensions.json diff --git a/package.json b/package.json index a385e42..3f888f1 100644 --- a/package.json +++ b/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", diff --git a/src/components/Scene.tsx b/src/components/Scene.tsx index f12f88d..e6a9c63 100644 --- a/src/components/Scene.tsx +++ b/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(({ children, ...props }, ref) => { const { vrModeUI, orientationUI, colorSpace, ...rest } = props; + const sceneRef = useRef(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(({ 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 ); diff --git a/src/utils/common.ts b/src/utils/common.ts index 2a5afab..9b57059 100644 --- a/src/utils/common.ts +++ b/src/utils/common.ts @@ -100,3 +100,28 @@ export const getAframeProps = (props: Record): 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; + } + } + }; +};