94 lines
2.2 KiB
JavaScript
94 lines
2.2 KiB
JavaScript
import { Animation } from './Animation.js';
|
|
|
|
class World extends Animation {
|
|
|
|
constructor( game ) {
|
|
|
|
super( true );
|
|
|
|
this.game = game;
|
|
|
|
this.container = this.game.dom.game;
|
|
this.scene = new THREE.Scene();
|
|
|
|
this.renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
|
|
this.renderer.setPixelRatio( window.devicePixelRatio );
|
|
this.container.appendChild( this.renderer.domElement );
|
|
|
|
this.camera = new THREE.PerspectiveCamera( 2, 1, 0.1, 10000 );
|
|
|
|
this.stage = { width: 2, height: 3 };
|
|
this.fov = 10;
|
|
|
|
this.createLights();
|
|
|
|
this.onResize = [];
|
|
|
|
this.resize();
|
|
window.addEventListener( 'resize', () => this.resize(), false );
|
|
|
|
}
|
|
|
|
update() {
|
|
|
|
this.renderer.render( this.scene, this.camera );
|
|
|
|
}
|
|
|
|
resize() {
|
|
|
|
this.width = this.container.offsetWidth;
|
|
this.height = this.container.offsetHeight;
|
|
|
|
this.renderer.setSize( this.width, this.height );
|
|
|
|
this.camera.fov = this.fov;
|
|
this.camera.aspect = this.width / this.height;
|
|
|
|
const aspect = this.stage.width / this.stage.height;
|
|
const fovRad = this.fov * THREE.Math.DEG2RAD;
|
|
|
|
let distance = ( aspect < this.camera.aspect )
|
|
? ( this.stage.height / 2 ) / Math.tan( fovRad / 2 )
|
|
: ( this.stage.width / this.camera.aspect ) / ( 2 * Math.tan( fovRad / 2 ) );
|
|
|
|
distance *= 0.5;
|
|
|
|
this.camera.position.set( distance, distance, distance);
|
|
this.camera.lookAt( this.scene.position );
|
|
this.camera.updateProjectionMatrix();
|
|
|
|
const docFontSize = ( aspect < this.camera.aspect )
|
|
? ( this.height / 100 ) * aspect
|
|
: this.width / 100;
|
|
|
|
document.documentElement.style.fontSize = docFontSize + 'px';
|
|
|
|
if ( this.onResize ) this.onResize.forEach( cb => cb() );
|
|
|
|
}
|
|
|
|
createLights() {
|
|
|
|
this.lights = {
|
|
holder: new THREE.Object3D,
|
|
ambient: new THREE.AmbientLight( 0xffffff, 0.69 ),
|
|
front: new THREE.DirectionalLight( 0xffffff, 0.36 ),
|
|
back: new THREE.DirectionalLight( 0xffffff, 0.19 ),
|
|
};
|
|
|
|
this.lights.front.position.set( 1.5, 5, 3 );
|
|
this.lights.back.position.set( -1.5, -5, -3 );
|
|
|
|
this.lights.holder.add( this.lights.ambient );
|
|
this.lights.holder.add( this.lights.front );
|
|
this.lights.holder.add( this.lights.back );
|
|
|
|
this.scene.add( this.lights.holder );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
export { World };
|