https://github.com/sinclairzx81/three-instanced-mesh
A reference project enabling geometry instancing for threejs materials
https://github.com/sinclairzx81/three-instanced-mesh
geometry-instancing materials shadow-mapping three
Last synced: 7 days ago
JSON representation
A reference project enabling geometry instancing for threejs materials
- Host: GitHub
- URL: https://github.com/sinclairzx81/three-instanced-mesh
- Owner: sinclairzx81
- License: mit
- Created: 2019-01-16T04:48:09.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-04-28T15:00:29.000Z (about 7 years ago)
- Last Synced: 2024-10-19T11:12:19.806Z (over 1 year ago)
- Topics: geometry-instancing, materials, shadow-mapping, three
- Language: TypeScript
- Homepage:
- Size: 375 KB
- Stars: 3
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# three-instanced-mesh
A reference project enabling geometry instancing for threejs' MeshStandardMaterial.
```typescript
import * as THREE from 'three'
import { InstancedMesh } from './instanced/mesh'
...
const geometry = new THREE.BoxBufferGeometry(1, 1, 1)
const material = new THREE.MeshStandardMaterial({
color: 0x888888,
metalness: 0.1,
roughness: 0.4,
})
// create 4096 instances of this mesh
const mesh = new InstancedMesh(4096, geometry, material)
for(const instance of mesh.instances) {
instance.position.x = (Math.random() * 16) - 8
instance.position.y = (Math.random() * 16) - 8
instance.position.z = (Math.random() * 16) - 8
}
mesh.updateInstances()
```
### overview
This project is a small reference project for enabling geometry instancing for threejs and having it integrate with threes existing material and shadow mapping pipeline. This project provides reference `depth`, `distance` and `standard` material shaders and a small demo.
A demo of this project can be found [here](https://codepen.io/anon/pen/wZOrKd)
### running locally
Ensure nodejs is installed. Clone this project and run.
```
npm start
```
This will start a watch server on `http://localhost:5000`