debian-mirror-gitlab/app/assets/javascripts/blob/3d_viewer/index.js

118 lines
2.8 KiB
JavaScript
Raw Normal View History

2017-08-17 22:00:37 +05:30
import OrbitControlsClass from 'three-orbit-controls';
2021-03-11 19:13:27 +05:30
import STLLoaderClass from 'three-stl-loader';
import * as THREE from 'three/build/three.module';
2017-08-17 22:00:37 +05:30
import MeshObject from './mesh_object';
const STLLoader = STLLoaderClass(THREE);
const OrbitControls = OrbitControlsClass(THREE);
export default class Renderer {
constructor(container) {
this.renderWrapper = this.render.bind(this);
this.objects = [];
this.container = container;
this.width = this.container.offsetWidth;
this.height = 500;
this.loader = new STLLoader();
this.fov = 45;
2018-12-13 13:39:08 +05:30
this.camera = new THREE.PerspectiveCamera(this.fov, this.width / this.height, 1, 1000);
2017-08-17 22:00:37 +05:30
this.scene = new THREE.Scene();
this.scene.add(this.camera);
2018-12-05 23:21:45 +05:30
// Set up the viewer
2017-08-17 22:00:37 +05:30
this.setupRenderer();
this.setupGrid();
this.setupLight();
2018-12-05 23:21:45 +05:30
// Set up OrbitControls
2018-12-13 13:39:08 +05:30
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
2017-08-17 22:00:37 +05:30
this.controls.minDistance = 5;
this.controls.maxDistance = 30;
this.controls.enableKeys = false;
this.loadFile();
}
setupRenderer() {
this.renderer = new THREE.WebGLRenderer({
antialias: true,
});
2018-12-13 13:39:08 +05:30
this.renderer.setClearColor(0xffffff);
2017-08-17 22:00:37 +05:30
this.renderer.setPixelRatio(window.devicePixelRatio);
2018-12-13 13:39:08 +05:30
this.renderer.setSize(this.width, this.height);
2017-08-17 22:00:37 +05:30
}
setupLight() {
// Point light illuminates the object
2018-12-13 13:39:08 +05:30
const pointLight = new THREE.PointLight(0xffffff, 2, 0);
2017-08-17 22:00:37 +05:30
pointLight.castShadow = true;
this.camera.add(pointLight);
// Ambient light illuminates the scene
2018-12-13 13:39:08 +05:30
const ambientLight = new THREE.AmbientLight(0xffffff, 1);
2017-08-17 22:00:37 +05:30
this.scene.add(ambientLight);
}
setupGrid() {
2018-12-13 13:39:08 +05:30
this.grid = new THREE.GridHelper(20, 20, 0x000000, 0x000000);
2017-08-17 22:00:37 +05:30
this.scene.add(this.grid);
}
loadFile() {
2021-03-08 18:12:59 +05:30
this.loader.load(this.container.dataset.endpoint, (geo) => {
2017-08-17 22:00:37 +05:30
const obj = new MeshObject(geo);
this.objects.push(obj);
this.scene.add(obj);
this.start();
this.setDefaultCameraPosition();
});
}
start() {
// Empty the container first
this.container.innerHTML = '';
// Add to DOM
this.container.appendChild(this.renderer.domElement);
// Make controls visible
this.container.parentNode.classList.remove('is-stl-loading');
this.render();
}
render() {
2018-12-13 13:39:08 +05:30
this.renderer.render(this.scene, this.camera);
2017-08-17 22:00:37 +05:30
requestAnimationFrame(this.renderWrapper);
}
changeObjectMaterials(type) {
2021-03-08 18:12:59 +05:30
this.objects.forEach((obj) => {
2017-08-17 22:00:37 +05:30
obj.changeMaterial(type);
});
}
setDefaultCameraPosition() {
const obj = this.objects[0];
2018-12-13 13:39:08 +05:30
const radius = obj.geometry.boundingSphere.radius / 1.5;
const dist = radius / Math.sin((this.fov * (Math.PI / 180)) / 2);
this.camera.position.set(0, dist + 1, dist);
2017-08-17 22:00:37 +05:30
this.camera.lookAt(this.grid);
this.controls.update();
}
}