parent
16cde00e23
commit
4f8255fac7
@ -0,0 +1,40 @@
|
|||||||
|
// @ts-nocheck
|
||||||
|
import React, { useEffect, useRef } from 'react'
|
||||||
|
|
||||||
|
import api, { Transform } from '../store'
|
||||||
|
|
||||||
|
type PhantomProps = {
|
||||||
|
id: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const Phantom: React.FC<PhantomProps> = ({ id }) => {
|
||||||
|
const ref = useRef<THREE.Mesh>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (ref.current) {
|
||||||
|
api.subscribe(
|
||||||
|
(state: Transform | null) => {
|
||||||
|
if (!state) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
ref.current?.position.fromArray([
|
||||||
|
state.position[0],
|
||||||
|
state.position[1] + 1.25,
|
||||||
|
state.position[2],
|
||||||
|
])
|
||||||
|
ref.current?.rotation.fromArray(state.rotation)
|
||||||
|
},
|
||||||
|
(state) => state?.userTransforms?.[id],
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}, [ref.current])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<mesh ref={ref}>
|
||||||
|
<sphereBufferGeometry args={[1, 16, 16]} />
|
||||||
|
<meshStandardMaterial color="hotpink" />
|
||||||
|
</mesh>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Phantom
|
@ -0,0 +1,27 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import shallow from 'zustand/shallow'
|
||||||
|
|
||||||
|
import Phantom from './Phantom'
|
||||||
|
import useStore from '../store'
|
||||||
|
|
||||||
|
const Users: React.FC = () => {
|
||||||
|
const socket = useStore((state) => state.socket)
|
||||||
|
const users = useStore(
|
||||||
|
(state) => (state.userTransforms ? Object.keys(state.userTransforms) : null),
|
||||||
|
shallow,
|
||||||
|
)
|
||||||
|
|
||||||
|
if (users === null || socket === null) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{users.map((user) =>
|
||||||
|
user === socket.id ? null : <Phantom id={user} key={user} />,
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Users
|
Loading…
Reference in new issue