Git Product home page Git Product logo

trust-threejs's Introduction

threejs-starter-kit

My current worlflow for quick THREE.js prototypes.

screenshot

Usage

After cloning install all node dependencies

npm i

Then launch the main task to open budo livereload server

npm start

You are good to go !

If you need a minified build just run

npm run build

Then put the /index.html and /index.js (+ any assets that you might be using) on your server.

Features

  • ES6 with Babel
  • Budo (browserify local server with livereload)
  • Glslify (browserify transform for glsl)
  • My personnal GUI
  • Basic asset preloader (you probably need to extend it for your needs)
  • OrbitControls
  • Simple setup with my ideal file structure
  • Postprocessing with my fork of spite's WAGNER

File Structure and coding style

I like to create "Objects" classes in src/objects that contain elements from my scene. They usually extend THREE.Object3D so that they can be added to a parent, have positions and rotations etc... I also sometime extend THREE.Mesh directly but it can be a bit restrictive since in that case you need to prepare all geometries and material in the constructor before the call to super() without being able to use this.

Also i like to avoid using the THREE global keyword and instead I import only the Objects that I need. This is pointless but it might be useful in the tree-shaking future / alternate reality.

import { Object3D, Mesh, MeshBasicMaterial } from THREE

I try to respect the Standard coding style.

trust-threejs's People

Contributors

superguigui avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.