Skip to content


 Zabbix
 Grafana
 Prometheus
 React Three Fiber
 Threejs and TypeScript
 SocketIO and TypeScript
 Blender Topological Earth
 Sweet Home 3D
 Design Patterns Python
 Design Patterns TypeScript
   
 Course Coupon Codes
Three.js and TypeScript
Kindle Edition
$6.99 $9.99 Paperback 
$22.99 $29.99




Design Patterns in TypeScript
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99
Design Patterns in Python
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99

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>
  )
}
GridHelper threejs.org codesandbox.io

Working Example

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