Skip to content

gridHelper

Video Lecture

Section Video Links
gridHelper gridHelper gridHelper

Description

The gridHelper is a two-dimensional grid of intersecting lines. It is useful if you need to imagine where a floor might be, or some other boundary.

Add the gridHelper to the React Three Fiber canvas, or any other Object3D within the canvas.

<gridHelper />

The gridHelper can also be changed using arguments.

E.g., A 20x20 grid with red center lines, and teal grid lines.

<gridHelper args={[20, 20, 0xff0000, 'teal']} />

Since the GridHelper is a THREE.Object3D, just like every other Three.js object that can be placed in the scene, we can rotate it.

<gridHelper rotation-x={Math.PI / 4} />

In the above example, I used piercing to reach the nested attribute x in its rotation property.

I could also have used,

<gridHelper rotation={[Math.PI / 4, 0, 0]} />

./src/App.jsx

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { Canvas } from '@react-three/fiber'
import Polyhedron from './Polyhedron'
import * as THREE from 'three'
import { Stats, OrbitControls } from '@react-three/drei'

export default function App() {
  const polyhedron = [
    new THREE.BoxGeometry(),
    new THREE.SphereGeometry(0.785398),
    new THREE.DodecahedronGeometry(0.785398),
  ]

  return (
    <Canvas camera={{ position: [1, 2, 3] }}>
      <Polyhedron position={[-0.75, -0.75, 0]} polyhedron={polyhedron} />
      <Polyhedron position={[0.75, -0.75, 0]} polyhedron={polyhedron} />
      <Polyhedron position={[-0.75, 0.75, 0]} polyhedron={polyhedron} />
      <Polyhedron position={[0.75, 0.75, 0]} polyhedron={polyhedron} />
      <OrbitControls />
      <axesHelper args={[5]} />
      <gridHelper />
      <Stats />
    </Canvas>
  )
}

Working Example

<>
GridHelper threejs.org sbedit.net

GitHub Branch

git clone https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate.git
cd React-Three-Fiber-Boilerplate
git checkout gridHelper
npm install
npm start

Comments