Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(templates/threejs): easier to use template #2473

Merged
merged 7 commits into from
Mar 22, 2024
Merged

feat(templates/threejs): easier to use template #2473

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
68c5501
feat(templates/threejs): easier to use template
qbzzt Mar 19, 2024
d5ce34b
Added eslint-config-mdcs to lint React ThreeJS definitions
qbzzt Mar 19, 2024
efee96c
refactor: add eslint-disable comment
yonadaaa Mar 20, 2024
9653617
Merge remote-tracking branch 'origin/main' into 240319-update-3js-tem…
yonadaaa Mar 20, 2024
684971f
Merge remote-tracking branch 'origin/main' into 240319-update-3js-tem…
yonadaaa Mar 22, 2024
a641d7f
refactor: different colors
yonadaaa Mar 22, 2024
211599a
fix: colors
yonadaaa Mar 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
189 changes: 175 additions & 14 deletions templates/threejs/packages/client/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,106 @@ import { getComponentValueStrict, Has } from "@latticexyz/recs";
import { useMUD } from "./MUDContext";
import { useKeyboardMovement } from "./useKeyboardMovement";

const Plane = (props: ThreeElements["mesh"]) => {
const Plane = () => {
return (
<mesh {...props}>
<>
{/* eslint-disable-next-line react/no-unknown-property */}
<boxGeometry args={[10, 5, 10]} />
<meshStandardMaterial color="green" />
</mesh>
<mesh position={[0, -1, 0]}>
{/* eslint-disable-next-line react/no-unknown-property */}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we figure out how to get react+eslint to allow this? I assume there's a three.js eslint config to include here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And the solution I found online doesn't work. Can we please just not worry about it? Prettier here is more trouble than it is worth, IMAO.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've always run into this issue with ThreeJS and TypeScript, I'll play around and try fix it. Also I get errors for all the elements so we are going to need a lot of these comments otherwise!
image

Copy link
Contributor

@yonadaaa yonadaaa Mar 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds like an open issue and the @react-three/eslint-plugin didn't work for me.

For now I added a comment at the top of the file but we could also add a eslintrc rule like

  ts"react/no-unknown-property": ["off", { "ignore": ["JSX"] }],

<boxGeometry args={[20, 0.1, 20]} />
{/* eslint-disable-next-line react/no-unknown-property */}
<meshStandardMaterial color="#000" opacity="0.9" transparent />
</mesh>

{/* eslint-disable-next-line react/no-unknown-property */}
<mesh position={[0, 3, -10]}>
{/* eslint-disable-next-line react/no-unknown-property */}
<boxGeometry args={[20, 5, 0.1]} />
{/* eslint-disable-next-line react/no-unknown-property */}
<meshStandardMaterial color="#F00" opacity="0.5" transparent />
</mesh>

{/* eslint-disable-next-line react/no-unknown-property */}
<mesh position={[10, 3, 0]}>
{/* eslint-disable-next-line react/no-unknown-property */}
<boxGeometry args={[0.1, 5, 20]} />
{/* eslint-disable-next-line react/no-unknown-property */}
<meshStandardMaterial color="#0F0" opacity="0.5" transparent />
</mesh>

{/* eslint-disable-next-line react/no-unknown-property */}
<mesh position={[5, 2, 0]}>
{/* eslint-disable-next-line react/no-unknown-property */}
<sphereGeometry args={[2, 10, 10]} />
{/* eslint-disable-next-line react/no-unknown-property */}
<meshStandardMaterial color="#FF0" opacity="0.8" transparent />
</mesh>

{/* eslint-disable-next-line react/no-unknown-property */}
<mesh position={[0, 2, 5]}>
{/* eslint-disable-next-line react/no-unknown-property */}
<sphereGeometry args={[2, 10, 10]} />
{/* eslint-disable-next-line react/no-unknown-property */}
<meshStandardMaterial color="#FF0" opacity="0.8" transparent />
</mesh>

{/* eslint-disable-next-line react/no-unknown-property */}
<mesh position={[-5, 2, 0]}>
{/* eslint-disable-next-line react/no-unknown-property */}
<sphereGeometry args={[2, 10, 10]} />
{/* eslint-disable-next-line react/no-unknown-property */}
<meshStandardMaterial color="#FF0" opacity="0.8" transparent />
</mesh>

{/* eslint-disable-next-line react/no-unknown-property */}
<mesh position={[0, 2, -5]}>
{/* eslint-disable-next-line react/no-unknown-property */}
<sphereGeometry args={[2, 10, 10]} />
{/* eslint-disable-next-line react/no-unknown-property */}
<meshStandardMaterial color="#FF0" opacity="0.8" transparent />
</mesh>

{/* eslint-disable-next-line react/no-unknown-property */}
<mesh position={[5, 2, -5]}>
{/* eslint-disable-next-line react/no-unknown-property */}
<sphereGeometry args={[1, 10, 10]} />
{/* eslint-disable-next-line react/no-unknown-property */}
<meshStandardMaterial color="#008" opacity="0.8" transparent />
</mesh>

{/* eslint-disable-next-line react/no-unknown-property */}
<mesh position={[5, 2, 5]}>
{/* eslint-disable-next-line react/no-unknown-property */}
<sphereGeometry args={[1, 10, 10]} />
{/* eslint-disable-next-line react/no-unknown-property */}
<meshStandardMaterial color="#008" opacity="0.8" transparent />
</mesh>

{/* eslint-disable-next-line react/no-unknown-property */}
<mesh position={[-5, 2, -5]}>
{/* eslint-disable-next-line react/no-unknown-property */}
<sphereGeometry args={[1, 10, 10]} />
{/* eslint-disable-next-line react/no-unknown-property */}
<meshStandardMaterial color="#008" opacity="0.8" transparent />
</mesh>
</>
);
};

const Player = (props: ThreeElements["mesh"] & { color: Color }) => {
return (
<mesh {...props}>
{/* eslint-disable-next-line react/no-unknown-property */}
<boxGeometry args={[1, 2, 1]} />
<meshStandardMaterial color={props.color} />
</mesh>
<>
<mesh {...props}>
{/* eslint-disable-next-line react/no-unknown-property */}
<boxGeometry args={[1, 2, 1]} />
<meshStandardMaterial color={props.color} />
</mesh>
<mesh {...props}>
{/* eslint-disable-next-line react/no-unknown-property */}
<boxGeometry args={[1, 2, 1]} />
<meshStandardMaterial color={props.color} />
</mesh>
</>
);
};

Expand Down Expand Up @@ -58,7 +141,7 @@ const Scene = () => {
<ambientLight />
{/* eslint-disable-next-line react/no-unknown-property */}
<pointLight position={[10, 10, 10]} />
<Plane position={[0, -5, 0]} />
<Plane />
{players.map((p, i) => (
<Player
key={i}
Expand All @@ -72,10 +155,88 @@ const Scene = () => {

const styles = { height: "100vh" };

const Directions = () => {
return (
<>
<p>
You are the rectangular prism, moving around the scene. To move use <b>W</b>, <b>A</b>, <b>S</b>, and <b>D</b>.
You can also move up (<b>T</b>) and down (<b>G</b>).
</p>
</>
);
};

const PlayerInfo = () => {
const {
components: { Position },
network: { playerEntity },
} = useMUD();

const playerPosition = useComponentValue(Position, playerEntity);

if (!playerPosition) {
return (
<div style={{ backgroundColor: "yellow" }}>
<table>
<tbody>
<tr>
<td>
<h2>Reading player position</h2>
</td>
<td>
<Directions />
</td>
</tr>
</tbody>
</table>
</div>
);
}

return (
<div style={{ backgroundColor: "yellow" }}>
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<th>Coordinate</th>
<th>Value</th>
</tr>
<tr>
<th>x</th>
<td align="right">{playerPosition.x}</td>
</tr>
<tr>
<th>y</th>
<td align="right">{playerPosition.y}</td>
</tr>
<tr>
<th>z</th>
<td align="right">{playerPosition.z}</td>
</tr>
</tbody>
</table>
</td>
<td style={{ padding: 20 }}>
<Directions />
</td>
</tr>
</tbody>
</table>
</div>
);
};

export const App = () => {
return (
<Canvas style={styles}>
<Scene />
</Canvas>
<>
<PlayerInfo />
<Canvas style={styles}>
<Scene />
</Canvas>
</>
);
};
12 changes: 6 additions & 6 deletions templates/threejs/packages/client/src/useKeyboardMovement.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,22 @@ export const useKeyboardMovement = () => {

useEffect(() => {
const listener = (e: KeyboardEvent) => {
if (e.key === "ArrowUp") {
if (e.key === "w") {
moveBy(1, 0, 0);
}
if (e.key === "ArrowDown") {
if (e.key === "s") {
moveBy(-1, 0, 0);
}
if (e.key === "ArrowLeft") {
if (e.key === "a") {
moveBy(0, 0, -1);
}
if (e.key === "ArrowRight") {
if (e.key === "d") {
moveBy(0, 0, 1);
}
if (e.key === " ") {
if (e.key === "t") {
moveBy(0, 1, 0);
}
if (e.ctrlKey) {
if (e.key === "g") {
moveBy(0, -1, 0);
}
};
Expand Down
Loading