Discussion on: Creating a rudimentary pool table game using React, Three JS and react-three-fiber: Part 1

[Jonas Røssum]

Great article!
I really needed it two days ago, since I started experimenting with react-three-fiber and OrtbitControls!

Feedback:

This part felt a bit out of place:

You all know how to do this, so bye-bye and happy coding.

I was just kidding. So now, let's create a canvas.

Also, maybe you could rephrase this part:

Just one last thing to do here is the canvas doesn't take the entire height of the screen.
So in your index.css just add the following lines

For the part about Editing the camera settings, do you intend to only do this on initial render further in the article series? If not, I would recommend putting it in a useEffect call, to prevent the camera from resetting in each render

const { camera } = useThree()

useEffect(() => {
  camera.fov = 45
  camera.aspect = window.innerWidth / window.innerHeight
  camera.near = 0.1
  camera.far = 1000

  camera.up.set(0, 0, 1)
  camera.position.set(-5, 7, 5)
}, [])

Other than a few missing commas here and there, really nice article!

[Manan Joshi]

Thanks for the feedback. The camera is used for a couple of other things further down the line but this is a really good suggestion to wrap the camera in an useEffect call.