LoginSignup
16

More than 5 years have passed since last update.

【ES6】Three.jsテンプレ

Last updated at Posted at 2016-08-16

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16