Three js — заготовка класса для разработки 3d приложения

На коленке набросал небольшую заготовку класса для будущих разработок 3d приложений на Three JS. М.б. кому пригодится.
Поддерживается изменение размеров окна браузера (вьюшка резировая с динамическим перерисовыванием сцены)
В примере ниже рисуется кубик с осями ординат. Поддерживается изменение положения камеры с помощью мышки.

Подключаем Three JS и OrbitControls (для управления мышкой)

<script type='text/javascript' src='https://web-finder.ru/files/three.js'></script>
<script type='text/javascript' src='https://web-finder.ru/files/OrbitControls.js'></script>

Создаём простой дивник, где будет отображаться 3d визуализация нашего будущего приложения:

<div id="view_block" style="max-width: 750px; height: 300px; display: block; position: relative; border: 1px solid grey;"></div>

Сам класс и его вызов:

class three_visualisation {
    constructor(container_id) {
        //запоминаем id контейнер-а
        this.container_id = container_id;
        //определяем размеры div-ника с id = container_id
        var width = document.getElementById(container_id).clientWidth;
        var height = document.getElementById(container_id).clientHeight;
        //создаём камеру
        this.camera = new THREE.PerspectiveCamera( 45, width / height, 0.1, 1000000 );
        //ставим камеру в позицию по умолчанию
        this.setCameraDefaultPosition();
        //создаём сцену
        this.scene = new THREE.Scene();
        //создаём рендерер
        this.renderer = new THREE.WebGLRenderer({preserveDrawingBuffer: true, antialias: true});
        //белый цвет заполнения
        this.renderer.setClearColor(0xFFFFFF);
        //размеры канваса
        this.renderer.setSize( width, height );
        //привязываем канвас рендерера внутрь дива с id = container_id
        document.getElementById(container_id).appendChild( this.renderer.domElement );
        //включаем контроль мышкой
        this.controls = new THREE.OrbitControls( this.camera, this.renderer.domElement );
        this.controls.enableDamping = true;
        this.controls.dampingFactor = 0.25;
        this.controls.enableZoom = true;
        this.controls.enableRotate = true;
        this.controls.enablePan = true;
        this.animate();
 
	}
	setCameraDefaultPosition(){
		this.camera.position.z = 4000; 
        this.camera.position.x = -4000;
        this.camera.position.y = 4000;
	}
	animate() {
        requestAnimationFrame(this.animate.bind(this));
        this.renderer.render(this.scene, this.camera);
    };
 
    resizeView(){
    	var width = document.getElementById(this.container_id).clientWidth;
        var height = document.getElementById(this.container_id).clientHeight;
        this.renderer.setSize( width, height );
        this.camera.aspect = width / height;
        this.camera.updateProjectionMatrix();
    }

    addCube(){
        var geometry = new THREE.BoxGeometry( 1000, 1000, 1000 );
        var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
        var cube = new THREE.Mesh( geometry, material );
        this.scene.add( cube );
    }

    //показываем оси
    viewAxes(){
        var material_red = new THREE.LineBasicMaterial({
            color: 0xff0000
        });
        var geometry_red = new THREE.Geometry();
        geometry_red.vertices.push(
                new THREE.Vector3( 0, 0, 0 ),
                new THREE.Vector3( 0, 10000, 0 )
        );
        var line_red = new THREE.Line( geometry_red, material_red );
        line_red.name = 'line_red';
        this.scene.add( line_red );
 
        var material_green = new THREE.LineBasicMaterial({
            color: 0x00ff0c
        });
        var geometry_green = new THREE.Geometry();
        geometry_green.vertices.push(
                new THREE.Vector3( 0, 0, 0 ),
                new THREE.Vector3( 10000, 0, 0 )
        );
        var line_green = new THREE.Line( geometry_green, material_green );
        line_green.name = 'line_green';
        this.scene.add( line_green );
 
        var material_blue = new THREE.LineBasicMaterial({
            color: 0x0048ff
        });
        var geometry_blue = new THREE.Geometry();
        geometry_blue.vertices.push(
                new THREE.Vector3( 0, 0, -10000 ),
                new THREE.Vector3( 0, 0, 0 )
        );
        var line_blue = new THREE.Line( geometry_blue, material_blue );
        line_blue.name = 'line_blue';
        this.scene.add( line_blue );
    }
 
}
 
var view;
 
//когда DOM загружен - показываем вьюшку
document.addEventListener("DOMContentLoaded", function(event) { 
	view = new three_visualisation('view_block');
	view.viewAxes();
    view.addCube();
});
 
//в момент изменения размера окна браузера ресайзим вьюшку
window.addEventListener("resize", function(event) { 
	view.resizeView();
});