[Examples] CubeHeap, click to change to spheres (#229)

pmndrs · Jun 28, 2021 · 4753c70 · 4753c70
1 parent 23f4dff
commit 4753c70
Showing 1 changed file with 64 additions and 35 deletions.
diff --git a/examples/src/demos/CubeHeap.js b/examples/src/demos/CubeHeap.js
@@ -1,8 +1,8 @@
 import * as THREE from 'three'
-import React, { useMemo } from 'react'
+import React, { useMemo, useState } from 'react'
 import { Canvas, useFrame } from '@react-three/fiber'
 import niceColors from 'nice-color-palettes'
-import { Physics, usePlane, useBox } from '@react-three/cannon'
+import { Physics, usePlane, useBox, useSphere } from '@react-three/cannon'
 
 function Plane(props) {
   const [ref] = usePlane(() => ({ ...props }))
@@ -14,13 +14,50 @@ function Plane(props) {
   )
 }
 
-function Cubes({ number }) {
-  const boxSize = [0.1, 0.1, 0.1]
+const Spheres = ({ colors, number, size: args }) => {
+  const [ref, { at }] = useSphere(() => ({
+    args,
+    mass: 1,
+    position: [Math.random() - 0.5, Math.random() * 2, Math.random() - 0.5],
+  }))
+  useFrame(() => at(Math.floor(Math.random() * number)).position.set(0, Math.random() * 2, 0))
+  return (
+    <instancedMesh receiveShadow castShadow ref={ref} args={[null, null, number]}>
+      <sphereBufferGeometry args={args}>
+        <instancedBufferAttribute attachObject={['attributes', 'color']} args={[colors, 3]} />
+      </sphereBufferGeometry>
+      <meshLambertMaterial vertexColors={THREE.VertexColors} />
+    </instancedMesh>
+  )
+}
+
+const Boxes = ({ colors, number, size }) => {
+  const args = [size, size, size]
   const [ref, { at }] = useBox(() => ({
     mass: 1,
-    args: boxSize,
+    args,
     position: [Math.random() - 0.5, Math.random() * 2, Math.random() - 0.5],
   }))
+  useFrame(() => at(Math.floor(Math.random() * number)).position.set(0, Math.random() * 2, 0))
+  return (
+    <instancedMesh receiveShadow castShadow ref={ref} args={[null, null, number]}>
+      <boxBufferGeometry args={args}>
+        <instancedBufferAttribute attachObject={['attributes', 'color']} args={[colors, 3]} />
+      </boxBufferGeometry>
+      <meshLambertMaterial vertexColors={THREE.VertexColors} />
+    </instancedMesh>
+  )
+}
+
+const instancedGeometry = {
+  box: Boxes,
+  sphere: Spheres,
+}
+
+export default () => {
+  const [geometry, setGeometry] = useState('box')
+  const [number] = useState(200)
+  const [size] = useState(0.1)
 
   const colors = useMemo(() => {
     const array = new Float32Array(number * 3)
@@ -33,37 +70,29 @@ function Cubes({ number }) {
     return array
   }, [number])
 
-  useFrame(() => at(Math.floor(Math.random() * number)).position.set(0, Math.random() * 2, 0))
+  const InstancedGeometry = instancedGeometry[geometry]
 
   return (
-    <instancedMesh receiveShadow castShadow ref={ref} args={[null, null, number]}>
-      <boxBufferGeometry args={boxSize}>
-        <instancedBufferAttribute attachObject={['attributes', 'color']} args={[colors, 3]} />
-      </boxBufferGeometry>
-      <meshLambertMaterial vertexColors={THREE.VertexColors} />
-    </instancedMesh>
+    <Canvas
+      shadows
+      gl={{ alpha: false }}
+      camera={{ position: [-1, 1, 2.5], fov: 50 }}
+      onPointerMissed={() => setGeometry((geometry) => (geometry === 'box' ? 'sphere' : 'box'))}
+      onCreated={({ scene }) => (scene.background = new THREE.Color('lightblue'))}>
+      <hemisphereLight intensity={0.35} />
+      <spotLight
+        position={[5, 5, 5]}
+        angle={0.3}
+        penumbra={1}
+        intensity={2}
+        castShadow
+        shadow-mapSize-width={256}
+        shadow-mapSize-height={256}
+      />
+      <Physics broadphase="SAP">
+        <Plane rotation={[-Math.PI / 2, 0, 0]} />
+        <InstancedGeometry {...{ colors, number, size }} />
+      </Physics>
+    </Canvas>
   )
 }
-
-export default () => (
-  <Canvas
-    shadows
-    gl={{ alpha: false }}
-    camera={{ position: [-1, 1, 2.5], fov: 50 }}
-    onCreated={({ scene }) => (scene.background = new THREE.Color('lightblue'))}>
-    <hemisphereLight intensity={0.35} />
-    <spotLight
-      position={[5, 5, 5]}
-      angle={0.3}
-      penumbra={1}
-      intensity={2}
-      castShadow
-      shadow-mapSize-width={256}
-      shadow-mapSize-height={256}
-    />
-    <Physics broadphase="SAP">
-      <Plane rotation={[-Math.PI / 2, 0, 0]} />
-      <Cubes number={200} />
-    </Physics>
-  </Canvas>
-)