joshua/brunch-threejs
1
0
Fork 0
mirror of https://github.com/seigler/brunch-threejs synced 2025-07-25 08:36:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
No description
4 commits 1 branch 0 tags 109 KiB
Find a file
Exact
Joshua Seigler 68caf49088 :doc: ES6 -> ES2015 in README
2018-10-14 01:30:43 -04:00
.vscode :chick: Create project 2018-10-14 00:19:28 -04:00
app :chick: Create project 2018-10-14 00:19:28 -04:00
.eslintignore :chick: Create project 2018-10-14 00:19:28 -04:00
.eslintrc.json :chick: Create project 2018-10-14 00:19:28 -04:00
.gitignore :chick: Create project 2018-10-14 00:19:28 -04:00
brunch-config.js :chick: Create project 2018-10-14 00:19:28 -04:00
LICENSE ⚡ Add MIT license 2018-10-14 00:24:29 -04:00
package.json :chick: Create project 2018-10-14 00:19:28 -04:00
README.md :doc: ES6 -> ES2015 in README 2018-10-14 01:30:43 -04:00

README.md

Brunch app

This is brunch skeleton for starting a project in WebGL with Three.js and ES2016.

Getting started

  • Install (if you don't have them):
    • Node.js: brew install node on OS X
    • Brunch: npm install -g brunch
  • Create a new project :
    • Deploy with brunch :
      • brunch new myapp --skeleton https://github.com/seigler/brunch-threejs - create new project
    • Or use git to clone the brunch-threejs repository :
      • git clone https://github.com/Jeremboo/brunch-threejs
  • Download dependencies :
    • npm run deploy or npm install && npm start

How to use

  • npm start or brunch watch --server to watch the project with continuous rebuild.
  • npm run prod or brunch build --production to build minified project for production.

More

  • Like brunch basic skeleton :

    • public/ dir is fully auto-generated and served by HTTP server. Write your code in app/ dir.
    • Place static files you want to be copied from app/assets/ to public/.

  • Specific to this skeleton :

    • You can use this dir /app/js/components/ for your THREE.object3D components. For my part, I create one component for each 3D object. There is an example of a 3D object in this dir (Example.js) to show how you can create a THREE.object3D with ES2015.

    • /app/js/shaders contains fragments and vertex .glsl files. If you need to use some .glsl file for build a ShaderMaterial, you can import these files. Look at Example.js for more details.

    • The directory /app/js/core/ contains:

      • Webgl.js initializes the 3D scene and the camera.
      • Loop.js manages frame animation for each update of 3Dobjects.
      • props.js contains all variables of settings to be uses in all other files. It's specially created to be used by dat.gui

    • /app/js/main.js puts these together to animate a 3D object.

    • I also added EffectComposer for post processing.

Thanks to