【ES6】Three.jsテンプレ

REVISION: '78'

どうやって書くのがベストプラクティスなのだろうか？
複数シーンを追加するときとかどうすれば。。
シーンごとにクラスをつくるのか、もう少し細かく分けるべきな気がする。

デモ：http://codepen.io/mo4_9/pen/VjqRQX

Sample.js

import './OrbitControls';

export default class Sample {

  constructor (opts = {}) {

    this.width = window.innerWidth;
    this.height = window.innerHeight;
    this.output = opts.output || document.createElement('div');

    this.init();
  }

  init () {
    { // renderer
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.renderer.setClearColor( 0x222222 ); // 背景色
      this.renderer.setPixelRatio(window.devicePixelRatio || 1);
      this.renderer.setSize( this.width, this.height );
      this.output.appendChild( this.renderer.domElement );
    }
    { // scene
      this.scene = new THREE.Scene();
    }
    { // lights
      this.light = new THREE.DirectionalLight(0xffffcc, 1);
      this.light.position.set(0,100,30);
      this.scene.add(this.light);
      const ambientLight = new THREE.AmbientLight(0xffaa55);
      this.scene.add(ambientLight);
    }
    { // camera
      const perscamera = new THREE.PerspectiveCamera( 45, this.width / this.height, 1, 10000 ); // fov(視野角),aspect,near,far
      const orthocamera = new THREE.OrthographicCamera( this.width / -2, this.width / 2, this.height / 2, this.height / -2, 1, 10000 );
      this.camera = perscamera;
      this.camera.position.set( 100, 100, 100 );
      this.camera.lookAt( this.scene.position );
    }
    { // helper
      const gridHelper = new THREE.GridHelper(200,50); // size, step
      this.scene.add(gridHelper);
      const axisHelper = new THREE.AxisHelper(200,50);
      this.scene.add(axisHelper);
      const lightHelper = new THREE.DirectionalLightHelper(this.light,20);
      this.scene.add(lightHelper);
    }
    { // controls
      this.controls = new THREE.OrbitControls(this.camera);
      this.controls.autoRotate = true;
    }
    { // cube
      const geometry = new THREE.CubeGeometry(20, 20, 20);
      const material = new THREE.MeshLambertMaterial({ color: 0xFBBC05 });
      const cube = new THREE.Mesh(geometry, material);
      this.scene.add(cube);
    }

    this.render();
    // メソッドをそのまま渡すと`not function`と怒られるので
    // 無名関数で囲って関数にする点に注意
    window.addEventListener('resize', () => {
        this.onResize();
    }, false);

  }

  render () {
    requestAnimationFrame( () => {
      this.render();
    });
    this.controls.update();
    this.renderer.render( this.scene, this.camera );
  }

  onResize () {
    this.camera.aspect = window.innerWidth / window.innerHeight;
    this.camera.updateProjectionMatrix();
    this.renderer.setSize( window.innerWidth, window.innerHeight );
  }

}

script.js

import Sample from './Sample';

const sample = new Sample({
  output: document.getElementById('webgl-output')
});

参考
http://jsdo.it/shuuuuun/ywm2