Skip to content

Instantly share code, notes, and snippets.

@robksawyer
Created November 16, 2022 16:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save robksawyer/e2585499a328ba8ea5b64ff2ba2c20b4 to your computer and use it in GitHub Desktop.
Save robksawyer/e2585499a328ba8ea5b64ff2ba2c20b4 to your computer and use it in GitHub Desktop.
Here's a clever/clean way to randomly position geometry.
function Noodle() {
const { viewport, camera } = useThree()
const { nodes } = useGLTF('/worms-transformed.glb')
const [geometry] = useState(() => nodes[`noodle_${Math.ceil(Math.random() * 4)}`].geometry)
const [speed] = useState(() => 0.1 + Math.random() / 10)
const position = useMemo(() => {
const z = Math.random() * -30
const bounds = viewport.getCurrentViewport(camera, [0, 0, z])
return [THREE.MathUtils.randFloatSpread(bounds.width), THREE.MathUtils.randFloatSpread(bounds.height * 0.75), z]
}, [viewport])
return (
<Float position={position} speed={speed} rotationIntensity={10} floatIntensity={40} dispose={null}>
<mesh scale={5} geometry={geometry} material={material} />
</Float>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment