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();
});



Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *