Three Scatter Docs

Appearance

Three scatter ​

Inspired by a GScatter (plugin for blender) in Three.js

Spread all types of objects/models into a geometry easily

Why to use it ​

Three.js already comes with MeshSurfaceSampler you can think in three-scatter as an "extension" of it. I said it in quotes because is not quite true, three-scatter the approach is different and it comes with method to help scatter your Meshes.

Use three-scatter if you:

  • Would like to scatter complex models (3D models with animations, rigging, etc)
  • Want to align your model to the surface base, easily
  • Would like to tweak in real-time (or with panels) seeds, or any property of your 3D model to scatter
  • Want to remove object that have collisions, easily.
  • Want to scatter on specific axis (for example only y+up).

INFO

if performance is your must, MeshSurfaceSampler is your go to, I provided a debug option to help you, but MeshSurfaceSampler is much more performance since you can (and probably should) use InstancedMesh

Additionally you can use this library to generate only random positions on your geometry.

Installation ​

bash
npm i @jaimebboyjt/three-scatter
bash
yarn add @jaimebboyjt/three-scatter
bash
pnpm add @jaimebboyjt/three-scatter

Basic Usage ​

js
import { ThreeScatter } from 'three-scatter'

// Count: Number of samples
// Surface: Geometry from which to sample
// Model: 3D model/mesh or models/meshes to scatter

const scatter = new ThreeScatter(count, surface, model);
scene.add(scatter);