Skip to content

micmania1/ball-game

Repository files navigation

BallGame

Setup Steps

Repo Setup

The repo has been created using nx.dev using react, vite and no framework in standalone mode.

You can start the app by running:

npx nx serve ball-game

Dependencies

  1. three is the core library and @types/three provides typescript support
  2. @react-three/fiber is the react reconciler for threejs (similar to react-dom but for 3D/threejs instead of HTML)
  3. @react-three/drei not required, but has a lot of handy ThreeJS react components
  4. @react-three/rapier provides physics. Other physics engines are available.
  5. leva is used to alter components directly in the scene to experiment quickly
  6. wouter is used to add URL routing to control access to different levels. Similar to react-router but without reliance on react-dom.
yarn add three @types/three @react-three/fiber @react-three/drei @react-three/rapier

Other Resources

  1. manyworld.run is used to generate the "sky" (space background).

NX

This workspace has been generated by Nx, Smart Monorepos · Fast CI.

Generate code

If you happen to use Nx plugins, you can leverage code generators that might come with it.

Run nx list to get a list of available plugins and whether they have generators. Then run nx list <plugin-name> to see what generators are available.

Learn more about Nx generators on the docs.

Running tasks

To execute tasks with Nx use the following syntax:

nx <target> <project> <...options>

You can also run multiple targets:

nx run-many -t <target1> <target2>

..or add -p to filter specific projects

nx run-many -t <target1> <target2> -p <proj1> <proj2>

Targets can be defined in the package.json or projects.json. Learn more in the docs.

Want better Editor Integration?

Have a look at the Nx Console extensions. It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.

Explore the Project Graph

Run nx graph to show the graph of the workspace. It will show tasks that you can run with Nx.