dustinlacewell / react-ecs Goto Github PK

Any plans for Pixi view port? There is a pixi-react-fiber library that seems like it would fit pretty well with your library

Can it be used for Vue3?

e.g.

<Entity>
  <Image src="https://example.com/img1.jpg" width="100" height="150" position={[0, 0, 0]} />
  <Image src="https://example.com/img2.jpg" width="10" height="10" position={[90, 10, 0]} />
  <ThreeView>
    <mesh></mesh>
  </ThreeView>
</Entity>

Will require a way to query for multiple facets, e.g.

query.loop([ThreeView, [Image]], (e, [view, image]) => {
    });

Or potentially, Facet could inherit from React.Component to allow children?

<ImageFacet>
  <image one>
  <image two>
</ImageFacet>

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>
  )
}

fluff

Hi :D. I'm exercising the library pretty well at the moment. Well done on it. So far I've only ran into type issues with things like twice extending the Facet class, which wouldn't then carry props into the react component.

Line causing type error

How I found this

Regarding the line above:
If I have a query

// Note 'hasAny'
const query = useQuery((entity) => entity.hasAny(FacetA, FacetB))

Then follow up with a loop:

query.loop([FacetA, FacetB], (entity, [facetA, facetB]) => {
  assert(facetA !== undefined)
  assert(facetB !== undefined)
}

Would likely throw if I only added one of the two facets FacetA FacetB. Even though they are definitely asserted on your get(t)! part.

Indeed I can reproduce this here:
https://codesandbox.io/s/zealous-nobel-q5id3?file=/src/App.tsx

Suggested fixes

One of:

• Remove the ! on the get statement
• Make query.loop filter for components given in first parameter
• Make returned tuple | undefined

Title says it all.

https://react-ecs.ldlework.com/examples/core/DOMParticles

On this example when engine.removeEntity(e) is called, the whole particle system gets reset.

I suspect this has something to do with some react component being re-rendered when the data changes...

What

It seems like QueryRef is missing from https://github.com/dustinlacewell/react-ecs/blob/master/libs/core/src/lib/index.ts

Thus I cannot include it from the built javascript files.

Why it's needed

I found perhaps another related issue with useQuery. It does not disconnect queries on the unmount of the hosting component. In a fix I made for this issue I needed access to the QueryRef constructor. Should this related issue I'll create another ticket for this error with a repro.