78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
import * as THREE from 'three';
|
|
|
|
export class Renderer {
|
|
public scene!: THREE.Scene;
|
|
public camera!: THREE.PerspectiveCamera;
|
|
public renderer!: THREE.WebGLRenderer;
|
|
|
|
public sun!: THREE.DirectionalLight;
|
|
public ambient!: THREE.AmbientLight;
|
|
|
|
public ground!: THREE.Mesh;
|
|
|
|
private clock = new THREE.Clock();
|
|
private _renderFn?: (dt: number) => void;
|
|
|
|
constructor() {}
|
|
|
|
get canvas() {
|
|
return this.renderer.domElement;
|
|
}
|
|
|
|
initialize() {
|
|
this.scene = new THREE.Scene();
|
|
this.camera = new THREE.PerspectiveCamera(
|
|
75,
|
|
window.innerWidth / window.innerHeight,
|
|
0.1,
|
|
1000,
|
|
);
|
|
|
|
this.renderer = new THREE.WebGLRenderer();
|
|
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
|
document.body.appendChild(this.renderer.domElement);
|
|
|
|
this.renderer.setClearColor(0x00ddff);
|
|
|
|
this.sun = new THREE.DirectionalLight(0xffffff);
|
|
this.sun.position.set(10, 10, 0);
|
|
this.scene.add(this.sun);
|
|
|
|
this.ambient = new THREE.AmbientLight(0xe8e8e8, 0.2);
|
|
this.scene.add(this.ambient);
|
|
|
|
this.ground = new THREE.Mesh(
|
|
new THREE.BoxGeometry(100, 1, 100, 10, 1, 10),
|
|
new THREE.MeshToonMaterial({ color: 0x32a852 }),
|
|
);
|
|
|
|
this.ground.position.set(0, -0.5, 0);
|
|
this.scene.add(this.ground);
|
|
|
|
this.camera.position.set(0, 4, 4);
|
|
|
|
window.addEventListener('resize', () => {
|
|
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
|
this.camera.aspect = window.innerWidth / window.innerHeight;
|
|
this.camera.updateProjectionMatrix();
|
|
});
|
|
|
|
this.render();
|
|
}
|
|
|
|
render() {
|
|
requestAnimationFrame(() => this.render());
|
|
|
|
const delta = this.clock.getDelta();
|
|
if (this._renderFn) {
|
|
this._renderFn(delta);
|
|
}
|
|
|
|
this.renderer.render(this.scene, this.camera);
|
|
}
|
|
|
|
public registerRenderFunction(fn: (dt: number) => void) {
|
|
this._renderFn = fn;
|
|
}
|
|
}
|