joshua/webgl-threejs-hello
1
0
Fork 0
mirror of https://github.com/seigler/webgl-threejs-hello synced 2025-07-25 08:46:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
No description
9 commits 2 branches 0 tags 7.3 MiB
Find a file
Exact
Joshua Seigler 0b5065bc97 ⚡ Dither clouds
2018-10-12 14:11:56 -04:00
.vscode :chick: initial commit 2018-10-10 11:30:18 -04:00
app ⚡ Dither clouds 2018-10-12 14:11:56 -04:00
.eslintignore :chick: initial commit 2018-10-10 11:30:18 -04:00
.eslintrc.json :chick: initial commit 2018-10-10 11:30:18 -04:00
.gitignore :chick: initial commit 2018-10-10 11:30:18 -04:00
brunch-config.coffee ⚡ Add post processing 2018-10-11 04:24:57 -04:00
LICENSE Initial commit 2018-10-10 11:29:17 -04:00
package-lock.json ⚡ Add gh-pages publishing 2018-10-10 11:33:44 -04:00
package.json ⚡ Add gh-pages publishing 2018-10-10 11:33:44 -04:00
README.md :chick: initial commit 2018-10-10 11:30:18 -04:00

README.md

Brunch app

This is brunch skeleton for starting a project in WebGL with Three.js, ES2015 and WAGNER.

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/Jeremboo/brunch-threejs-es6 - create new project
    • Or use git to clone the brunch-threejs-es6 repository :
      • git clone https://github.com/Jeremboo/brunch-threejs-es6
  • 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 placed your THREE.object3D components. For my part, I create one component for each 3D objet. There is an example of object 3D in this dir (Example.js) for showing you how can you create a THREE.object3D with ES6.

    • /app/js/shaders contains each fragments and vertices .glsl files. If you need to use a couple of .glsl file for build a ShaderMaterial, you just need to import this files. Look at Example.js for more details.

    • This directory /app/js/core/ contain the classes of setting :

      • Webgl.js initializes the 3D scene and the camera.
      • Loop.js allows to manage the frame animation for each update of 3Dobjects.
      • props.js is a file who contains all variables of settings who can be use in all other file. It's specially created for be used by dat.gui

    • /app/js/main.js allows to show you how all of this files are using for create and animate a 3D object.

    • I also added WAGNER for have a choice of post processing already available.

Thanks to