can't forward ref to ThreeView

[bvkimball]

When trying to use with @react-three/cannon with react-ecs you need to pass the ref to the mesh, but the "ref" is overwritten by ThreeView when it clones the element.

I wrote a hack to basically to add a ref to ThreeView and merge that with the internalRef of ThreeView but thats not working.

import { Entity } from '@react-ecs/core'
import { ThreeView } from '@react-ecs/three'
import { useCylinder } from '@react-three/cannon'
import React from 'react'
import { PhysicsRef } from '../facets'

export const Pillar: React.FC<any> = ({ args = [0.7, 0.7, 5, 16], ...props }) => {
  const [ref, api] = useCylinder(() => ({ mass: 10, args, ...props }))
  return (
    <Entity>
      <ThreeView>
        <mesh ref={ref} castShadow>
          <cylinderGeometry args={args} />
          <meshNormalMaterial />
        </mesh>
      </ThreeView>
      <PhysicsRef target={ref} api={api} />
    </Entity>
  )
}

[Honga1]

@bvkimball

Hi Brian, below is my solution to your issue. Hope it helps!

import { EntityContext } from '@react-ecs/core'
import React, {
  Children,
  Component,
  ContextType,
  createRef,
  ReactElement,
  RefObject,
} from 'react'
import { Object3D } from 'three'
import mergeRefs from 'react-merge-refs'

export interface ThreeViewProps {
  children: ReactElement
  innerRef?: RefObject<Object3D>
}

/**
 * A modification of https://github.com/dustinlacewell/react-ecs/blob/master/libs/three/src/components/ThreeView/index.tsx
 * Adds forwarding the ref for the contained object
 */
export class ThreeView extends Component<ThreeViewProps> {
  static contextType = EntityContext
  declare context: ContextType<typeof EntityContext>
  public readonly ref: RefObject<Object3D>

  constructor(props: ThreeViewProps) {
    super(props)
    this.ref = createRef<Object3D>()
  }

  get object3d() {
    return this.ref.current!
  }

  componentDidMount() {
    const entity = this.context!
    entity.add(this as NonNullable<ThreeView>)
  }

  render() {
    if (Children.count(this.props.children) !== 1) {
      throw new Error('<ThreeView /> must have a single child.')
    }

    return (
      <>
        {React.cloneElement(this.props.children, {
          ref: this.props.innerRef
            ? mergeRefs([this.ref, this.props.innerRef])
            : this.ref,
        })}
      </>
    )
  }
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
;(ThreeView as any).__componentClassId__ = 100

[dustinlacewell]

I'd love to invite you guys as maintainers if you'd be open to that.

[bvkimball]

@Honga1 that is where i basically ended up too!

@dustinlacewell I will work on a PR with this and an example with use-cannon.