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




Sharing Objects

Video Lecture

Section Video Links
Sharing Objects Sharing Objects Sharing Objects

Description

In this lesson, instead of using useMemo to cache our objects in the components for re-use, we can move the instances into the parent component, and then pass them down by reference. This will also allow us to re-use the same instances in the child components, rather than creating new copies of each.

./src/Polyhedron.jsx

To begin, delete ./src/Box.jsx and create a new file named ./src/Polyhedron.jsx

Copy/paste the below script into it.

 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
26
27
import { useRef, useState } from 'react'
import { useFrame } from '@react-three/fiber'

export default function Polyhedron({ position, polyhedron }) {
  const ref = useRef()
  const [count, setCount] = useState(0)

  console.log(polyhedron)

  useFrame((_, delta) => {
    ref.current.rotation.x += delta
    ref.current.rotation.y += 0.5 * delta
  })

  return (
    <mesh
      position={position}
      ref={ref}
      onPointerDown={() => {
        setCount((count + 1) % 3)
      }}
      geometry={polyhedron[count]}
    >
      <meshBasicMaterial color={'lime'} wireframe />
    </mesh>
  )
}

./src/App.jsx

Replace the contents of ./src/App.jsx with this below script.

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

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

  return (
    <Canvas camera={{ position: [0, 0, 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} />
    </Canvas>
  )
}

In ./src/App.jsx, I have created an array of 3 different pre-defined Three.js geometries.

const polyhedron = [
  new THREE.BoxGeometry(),
  new THREE.SphereGeometry(0.785398),
  new THREE.DodecahedronGeometry(0.785398),
]

In the JSX where the Polyhedron components are declared, I also add an extra prop named polyhedron passing in the polyhedron array.

<Polyhedron ... polyhedron={polyhedron} />

Also, remember that array indexes are 0 based. So asking for 0 would give me the first, and asking for 1 gives me the second and so on.

Also note that I didn't wrap the polyhedron array in a useMemo. This is because the App component itself never re-renders in this small applications. If App ever became more sophisticated that it had some state or props changes while running, then you could consider using useMemo to cache the polyhedron array instances.

userData threejs.org
Destructuring Assignment developer.mozilla.org
Lifting State Up reactjs.org

Working Example