Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/thejmazz/threejs-starter-pack

Starting pack for three.js projects
https://github.com/thejmazz/threejs-starter-pack

Last synced: 19 days ago
JSON representation

Starting pack for three.js projects

Awesome Lists containing this project

README

        

# threejs-starter-pack

Get up and going with

- [three.js](http://threejs.org/) (R75)
- [stats.js](https://github.com/mrdoob/stats.js/)
- [dat.gui](https://github.com/dataarts/dat.gui)
- [ccapture.js](https://github.com/spite/ccapture.js/)
- works with [three.js inspector](https://chrome.google.com/webstore/detail/threejs-inspector/dnhjfclbfhcbcdfpjaeacomhbdfjbebi?hl=en)

using

- [ES2015](https://babeljs.io/docs/plugins/preset-es2015/)
- [webpack](https://webpack.github.io/)
- [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin)
- [copy-webpack-plugin](https://github.com/kevlened/copy-webpack-plugin)

## Running

`npm start` in one tab and `npm run serve` in another.

## Structure

```
.
├── README.md
├── dist
│   ├── bundle.js
│   ├── bundle.js.map
│   └── index.html
├── package.json
├── src
│   ├── index.html
│   ├── index.js
│   └── scene
│   └── index.js
└── webpack.config.js
```

`src/index.js` is responsible for initializing the scene, and populating it
using `Object3D`s exported from `src/scene/index.js`. Each `Object3D` can
attach a function to the `keyframe` key, change properties through closures,
and these keyframe functions will be ran in the render loop. Consider this
example scene:

```js
export default () => {
const boxGeom = new THREE.BoxGeometry(1, 1, 1)
const normalMat = new THREE.MeshNormalMaterial()

const box = new THREE.Mesh(boxGeom, normalMat)

box.keyframe = () => {
box.rotation.x += 0.01
box.rotation.y += 0.01
}

return({ box })
}
```

In this way, you can keep animation properties close to your meshes, instead
of relying on accessing global variables for your objects in the render loop.

## Gotchas

- need to `ctrl-c` and `npm start` after modifying texture and model and files

## Coming soon

- screen auto resize
- [three-glslify](https://www.npmjs.com/package/three-glslify)
- callback free loading
- option to add resource to initial load queue
- easy to use web audio context
- [shader editor chrome extension](https://chrome.google.com/webstore/detail/shader-editor/ggeaidddejpbakgafapihjbgdlbbbpob)
- [pollinate](https://github.com/howardroark/pollinate) template