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