How do get the ref of the three object? And how to correctly add an entity?

[eriksachse]

Haven't been able to figure it out by myself 😅

In the react docs, there is the ref section https://github.com/hmans/miniplex/blob/main/packages/react/README.md#capturing-object-refs-into-components
My first question is: How do I access the ref exactly to move the object in the useFrame? There is the movement component as well in the docs, but this doesn't help, because it just changes the values in the store, right? Should I use the Entity component, get the object, create a ref, create a useFrame for each Entity, apply the ref to the three component and update the values that I get from another useFrame, which is in the crowd simulation or sum? How does the movement component help me with this?

My second question is that it is a little confusing how to correctly add an entity. I can do const entity = ECS.world.add({ position: { x: 0, y: 0 } }), but if I do this, while having <ECS.Entities in={ECS.world.with("position", "health")}> to display all the components with the three value, and then retrieve all entities, it gets back to me twice. I have found workarounds to this, but I feel like there is much more simple solutions to this.

[ahoys]

I too am confused with this and can't move the mesh, despite copying directly from the documentation.

Beyond that, I would appreciate if the documents would display the typing for the "three". Now it's a bit obscure what it is supposed to be.

That all being said, the documentation show this as an example how to use useFrame to move items

I wonder if we are confused due to the new 2.0.0 version not matching the documentation?

[ahoys]

Solved my issue.
I had:

entity.position.x += entity.velocity.x * delta;
entity.position.y += entity.velocity.y * delta;
entity.position.z += entity.velocity.z * delta;

And should've had:

entity.transform.position.x += entity.velocity.x * delta;
entity.transform.position.y += entity.velocity.y * delta;
entity.transform.position.z += entity.velocity.z * delta;

Here transform being the "three" you can see in the documentation. I've typed it to be Object3D.

[eriksachse]

Yes I've come this far as well. I guess there are objects and properties that you can use when filtering entities.
For me it'd be beneficial to have some storybooks at hand. Might do more exploration and write here.

Btw this is my implementation for now.

const spawnPlayer = ({ position }) => {
  ECS.world.add({
    player: true,
    velocity: Vector3(),
    jsx: (
      <>
        <ECS.Component name="transform">
          <mesh position={position} scale={0.2}>
            <capsuleGeometry />
            <meshNormalMaterial />
          </mesh>
        </ECS.Component>
      </>
    ),
  });
};

This is using the props inside the mesh itself.

Now I could write a function that is changing the velocity and have another system that moves the entity.