DEV Community

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

Manan Joshi on October 28, 2019

For a long time, I wanted to learn and get started with WebGL. Having done some work with OpenGL I thought WebGL would be a great addition to know ...

Read full post

Jonas Røssum • Oct 29 '19 • Edited

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 • Oct 29 '19

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.

Sean Matheson • Oct 29 '19

This is amazing. Thanks for posting!

Manan Joshi • Oct 29 '19

Thank you!!

Seanmclem • Mar 9 '20

Your first code sample appears to be missing some imports

Manan Joshi • Mar 9 '20

Could you please point me to that? As far as I remember the code sample will work well.

Seanmclem • Mar 10 '20 • Edited

Creating a basic scene:

First code sample uses mesh, boxBufferGeometry, and meshNormalMaterial, but only imports react. If that's accurate - how does that work?

Manan Joshi • Mar 29 '20

Sorry for the late reply. So the way this works is if you are aware that the jsx we write in React is not valid HTML but there is a plugin that transpiles those calls into React.createElement call. The same way when you write <mesh /> or <boxBufferGeometry> or any of the components in the three.js catalog react-three-fiber will go and convert those calls to three js calls. For starters check out this and this

pete • Apr 24 '20

I'm getting errors when I get to the orbit controls.. "The above error occurred in the component:" "Uncaught TypeError: target is not a constructor" ...

pete • Apr 24 '20

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

looks like this line changed and now needs to be destructured from OrbitControls

AbdElRahmanLotfy • Sep 25 '22

Thanks , great tutorial .