ThreeJS-Webpack-ES6-Boilerp.../src/js/app/components/renderer.js

44 lines
1.3 KiB
JavaScript
Raw Normal View History

import * as THREE from 'three';
2016-09-12 19:54:07 +00:00
import Config from '../../data/config';
2016-09-12 19:54:07 +00:00
export default class Renderer {
constructor(scene, container) {
2016-10-07 08:42:23 +00:00
// Properties
2016-09-12 19:54:07 +00:00
this.scene = scene;
this.container = container;
2016-09-12 19:54:07 +00:00
2016-10-07 08:42:23 +00:00
// Create WebGL renderer and set its antialias
2016-09-12 19:54:07 +00:00
this.threeRenderer = new THREE.WebGLRenderer({antialias: true});
2016-10-07 08:42:23 +00:00
// Set clear color to fog to enable fog or to color
2016-09-12 19:54:07 +00:00
this.threeRenderer.setClearColor(scene.fog.color);
2016-10-07 08:42:23 +00:00
this.threeRenderer.setPixelRatio(window.devicePixelRatio); // For retina
2016-09-12 19:54:07 +00:00
container.appendChild(this.threeRenderer.domElement);
2016-10-07 08:42:23 +00:00
// Shadow map options
2016-09-12 19:54:07 +00:00
this.threeRenderer.shadowMap.enabled = true;
this.threeRenderer.shadowMap.type = THREE.PCFSoftShadowMap;
2016-10-07 08:42:23 +00:00
// Get anisotropy for textures
2016-09-12 19:54:07 +00:00
Config.maxAnisotropy = this.threeRenderer.getMaxAnisotropy();
2016-10-07 08:42:23 +00:00
// Initial size update set to canvas container
2016-09-12 19:54:07 +00:00
this.updateSize();
// Listeners
document.addEventListener('DOMContentLoaded', () => this.updateSize(), false);
window.addEventListener('resize', () => this.updateSize(), false);
}
updateSize() {
this.threeRenderer.setSize(this.container.offsetWidth, this.container.offsetHeight);
}
render(scene, camera) {
2016-10-07 08:42:23 +00:00
// Renders scene to canvas target
2016-09-12 19:54:07 +00:00
this.threeRenderer.render(scene, camera);
}
}