367 lines
12 KiB
JavaScript
367 lines
12 KiB
JavaScript
import * as THREE from '../threeJsLib/three.module.js';
|
|
import { OrbitControls } from '../jsm/controls/OrbitControls.js';
|
|
import { ThreeMFLoader } from '../jsm/loaders/3MFLoader.js';
|
|
|
|
// VARIABILI DI CONTROLLO
|
|
var m_divStartDimX = 500;
|
|
var m_divStartDimY = 400;
|
|
var fName = "Cubo.3mf";
|
|
var m_fileSource = '';
|
|
var m_bZoom = true;
|
|
var m_bPan = true;
|
|
var m_bRot = true;
|
|
var m_bAutoRot = false;
|
|
//var useInSlider = false;
|
|
var m_nCamPos = 0;
|
|
var m_nStartL = 0;
|
|
var m_nEndL = 0;
|
|
var counter = 0;
|
|
|
|
let camera, scene, renderer, controls;
|
|
var layer_list = [];
|
|
const GLBox3D = new THREE.Box3(); // Box3D globale delle geometrie
|
|
//init();
|
|
class webgl_original {
|
|
async initcall({ _dimX, _dimY, _fileName, /*_useInSlider*/ }) {
|
|
m_divStartDimX = _dimX;
|
|
m_divStartDimY = _dimY;
|
|
fName = _fileName;
|
|
//useInSlider = _useInSlider;
|
|
console.log(fName)
|
|
setLoaders();
|
|
await init();
|
|
}
|
|
|
|
refreshcall(nStart, nEnd) {
|
|
refreshElement(nStart, nEnd);
|
|
}
|
|
}
|
|
|
|
export { webgl_original }
|
|
|
|
function setLoaders() {
|
|
//<input type="range" class="form-range" id="customRange1">
|
|
|
|
const mother = document.getElementById('WebGL-3mfExport');
|
|
|
|
const spinContainer = document.createElement('div');
|
|
const sliderInput = document.createElement('input');
|
|
const elParent = document.createElement('div');
|
|
const elChild1 = document.createElement('div');
|
|
const elChild2 = document.createElement('div');
|
|
const elChild3 = document.createElement('div');
|
|
const elChild4 = document.createElement('div');
|
|
const elChild5 = document.createElement('div');
|
|
const elChild6 = document.createElement('div');
|
|
const loadTxt = document.createElement('div');
|
|
|
|
//if (useInSlider) {
|
|
|
|
// mother.appendChild(sliderInput);
|
|
// sliderInput.setAttribute('id', 'refre_slider');
|
|
// sliderInput.setAttribute('hidden', true);
|
|
// sliderInput.type = 'range';
|
|
// sliderInput.min = '0';
|
|
//}
|
|
mother.appendChild(spinContainer);
|
|
//document.body.appendChild(spinContainer);
|
|
spinContainer.appendChild(elParent);
|
|
spinContainer.appendChild(loadTxt);
|
|
|
|
elParent.appendChild(elChild1);
|
|
elParent.appendChild(elChild2);
|
|
elParent.appendChild(elChild3);
|
|
elParent.appendChild(elChild4);
|
|
elParent.appendChild(elChild5);
|
|
elParent.appendChild(elChild6);
|
|
|
|
loadTxt.setAttribute('id', 'loadTxt');
|
|
spinContainer.setAttribute('id', 'spinContainer');
|
|
var st = 'height: ' + m_divStartDimY + 'px ; width: ' + m_divStartDimX + 'px ; background-color: #a0a0a0';
|
|
spinContainer.setAttribute("style", st);
|
|
elParent.setAttribute('id', 'sp');
|
|
|
|
elParent.classList.add('spinner');
|
|
|
|
|
|
loadTxt.style.padding = '30px 0 0 0'
|
|
loadTxt.innerText = 'Loading...';
|
|
|
|
loadTxt.style.fontSize = '50px';
|
|
loadTxt.style.fontFamily = 'Helvetica';
|
|
|
|
|
|
spinContainer.style.display = 'flex';
|
|
spinContainer.style.alignItems = 'center';
|
|
spinContainer.style.justifyContent = 'center';
|
|
spinContainer.style.flexDirection = 'column';
|
|
|
|
elParent.style.width = '70.4px';
|
|
elParent.style.height = '70.4px';
|
|
elParent.style.setProperty('--clr', 'rgb(247, 197, 159)');
|
|
elParent.style.setProperty('--clr-alpha', 'rgb(247, 197, 159,.1)');
|
|
|
|
elParent.style.transformStyle = 'preserve-3d';
|
|
|
|
elParent.animate([
|
|
// key frames
|
|
{ transform: 'rotate(45deg) rotateX(-25deg) rotateY(25deg)' },
|
|
{ transform: 'rotate(45deg) rotateX(-385deg) rotateY(25deg)' },
|
|
{ transform: 'rotate(45deg) rotateX(-385deg) rotateY(385deg)' }
|
|
], {
|
|
// sync options
|
|
duration: 2600,
|
|
iterations: Infinity,
|
|
easing: 'ease',
|
|
rangeStart: "cover 0%",
|
|
rangeEnd: "cover 100%"
|
|
});
|
|
|
|
var cDiv = elParent.children;
|
|
for (var i = 0; i < cDiv.length; i++) {
|
|
if (cDiv[i].tagName == "DIV") { //or use toUpperCase()
|
|
|
|
cDiv[i].style.height = '100%';
|
|
cDiv[i].style.position = 'absolute';
|
|
cDiv[i].style.width = '100%';
|
|
cDiv[i].style.border = '#afc5d6';
|
|
cDiv[i].style.backgroundSize = 'contain';
|
|
|
|
cDiv[i].style.backgroundImage = 'url(../styles/LogoClassic_NoText.png)'
|
|
}
|
|
}
|
|
|
|
elChild1.style.transform = 'translateZ(-35.2px) rotateY(180deg)';
|
|
elChild2.style.transform = 'rotateY(-270deg) translateX(50%)';
|
|
elChild2.style.transformOrigin = 'top right';
|
|
elChild3.style.transform = 'rotateY(270deg) translateX(-50%)';
|
|
elChild3.style.transformOrigin = 'center left';
|
|
elChild4.style.transform = 'rotateX(90deg) translateY(-50%)';
|
|
elChild4.style.transformOrigin = 'top center';
|
|
elChild5.style.transform = 'rotateX(-90deg) translateY(50%)';
|
|
elChild5.style.transformOrigin = 'bottom center';
|
|
elChild6.style.transform = 'translateZ(35.2px)';
|
|
|
|
|
|
}
|
|
|
|
function init() {
|
|
const manager = new THREE.LoadingManager();
|
|
const loader = new ThreeMFLoader(manager);
|
|
let startTime = performance.now();
|
|
return new Promise(() => {
|
|
setTimeout(() => {
|
|
loader.load('../models/3mf/' + fName, function (object) {
|
|
object.rotation.set(-Math.PI / 2, 0, 0);
|
|
object.traverse(function (child) {
|
|
child.castShadow = true;
|
|
});
|
|
for (var i = 0; i < object.children.length; ++i) {
|
|
var child = object.children[i];
|
|
child.rotation.set(-Math.PI / 2, 0, 0);
|
|
layer_list.push(child);
|
|
}
|
|
//console.log(layer_list);
|
|
AdaptSeceneToContest();
|
|
// Adapting Scene to contest
|
|
let endTime = performance.now();
|
|
let timeElapsed = endTime - startTime;
|
|
console.log('init in : ' + timeElapsed)
|
|
});
|
|
}, 0);
|
|
});
|
|
|
|
}
|
|
|
|
function AdaptSeceneToContest() {
|
|
scene = new THREE.Scene();
|
|
scene.background = new THREE.Color(0xa0a0a0);
|
|
//if (useInSlider) {
|
|
|
|
// document.getElementById("refre_slider").max = layer_list[layer_list.length - 1].children[0].nLayer;
|
|
// document.getElementById("refre_slider").value = layer_list[layer_list.length - 1].children[0].nLayer;
|
|
// document.getElementById("refre_slider").removeAttribute('hidden');
|
|
//}
|
|
|
|
for (var i = 0; i < layer_list.length; ++i) {
|
|
const Objbox = new THREE.Box3().setFromObject(layer_list[i]);
|
|
GLBox3D.union(Objbox);
|
|
layer_list[i].children[0].material.side = THREE.DoubleSide;
|
|
if (typeof layer_list[i].children[0].nLayer !== "undefined") {
|
|
|
|
}
|
|
scene.add(layer_list[i]);
|
|
}
|
|
const BoxHelper = new THREE.Box3Helper(GLBox3D, 0xffff00);
|
|
// setting camera position
|
|
const vtCenter = new THREE.Vector3(0, 0, 0);
|
|
GLBox3D.getCenter(vtCenter);
|
|
const vtPosition = vtCenter.clone().multiplyScalar(5);
|
|
const vtBoxDim = new THREE.Vector3(0, 0, 0);
|
|
GLBox3D.getSize(vtBoxDim);
|
|
|
|
|
|
|
|
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 30000);
|
|
camera.position.set(2 * vtBoxDim.x, 2 * vtBoxDim.y, 2 * vtBoxDim.z);
|
|
camera.lookAt(vtCenter.x, vtCenter.y, vtCenter.z);
|
|
scene.add(camera);
|
|
|
|
const hemiLight = new THREE.HemisphereLight(0xffffff, 0x8d8d8d);
|
|
hemiLight.position.set(vtCenter.x, vtCenter.y + 2 * vtBoxDim.y, vtCenter.z);
|
|
scene.add(hemiLight);
|
|
var HemisphereLightHelper = new THREE.Mesh(new THREE.SphereGeometry(15, 30, 15),
|
|
new THREE.MeshStandardMaterial({ color: 0xffffff, emissive: 0x404040 }));
|
|
HemisphereLightHelper.position.set(vtCenter.x, vtCenter.y + 2 * vtBoxDim.y, vtCenter.z);
|
|
|
|
|
|
const dirLight = new THREE.DirectionalLight(0xffffff);
|
|
dirLight.position.set(vtPosition.x, vtPosition.y, vtPosition.z);
|
|
dirLight.castShadow = true;
|
|
dirLight.shadow.camera.top = 50;
|
|
dirLight.shadow.camera.bottom = - 25;
|
|
dirLight.shadow.camera.left = - 25;
|
|
dirLight.shadow.camera.right = 25;
|
|
dirLight.shadow.camera.near = 0.1;
|
|
dirLight.shadow.camera.far = 200;
|
|
dirLight.shadow.mapSize.set(1024, 1024);
|
|
scene.add(dirLight);
|
|
const DirLighthelper = new THREE.DirectionalLightHelper(dirLight, 100);
|
|
|
|
|
|
const ground = new THREE.Mesh(new THREE.PlaneGeometry(10000, 10000),
|
|
new THREE.MeshPhongMaterial({ color: 0x36454F, depthWrite: true, }));
|
|
ground.rotation.x = - Math.PI / 2;
|
|
ground.position.y = -0.5;
|
|
ground.receiveShadow = true;
|
|
ground.material.opacity = 0.25;
|
|
ground.material.transparent = true;
|
|
ground.material.side = THREE.DoubleSide;
|
|
//scene.add( ground);
|
|
renderer = new THREE.WebGLRenderer({ antialias: true });
|
|
renderer.setPixelRatio(window.devicePixelRatio);
|
|
|
|
var container = document.getElementById('WebGL-3mfExport');
|
|
|
|
container.style.height = '100%';
|
|
container.style.width = '100%';
|
|
|
|
renderer.setSize(m_divStartDimX, m_divStartDimY);
|
|
renderer.shadowMap.enabled = true;
|
|
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
|
|
|
container.appendChild(renderer.domElement);
|
|
|
|
var cont = document.getElementById('spinContainer');
|
|
container.removeChild(cont);
|
|
|
|
|
|
controls = new OrbitControls(camera, renderer.domElement);
|
|
controls.addEventListener('change', render);
|
|
|
|
controls.update();
|
|
|
|
window.addEventListener('resize', onWindowResize);
|
|
render();
|
|
|
|
|
|
// TEST ===================================
|
|
setCameraZoom(m_bZoom);
|
|
setCameraPan(m_bPan);
|
|
setCameraRot(m_bRot);
|
|
setCameraAutoRot(m_bAutoRot);
|
|
SetCameraPos(2);
|
|
// =========================================
|
|
|
|
//console.log('aggiunto 1');
|
|
}
|
|
|
|
function refreshElement(nStart, nEnd) {
|
|
//console.log(parseInt(nStart));
|
|
for (var i = 0; i < layer_list.length; ++i) {
|
|
if (parseInt(layer_list[i].children[0].nLayer) >= parseInt(nStart) &&
|
|
parseInt(layer_list[i].children[0].nLayer) <= parseInt(nEnd)) {
|
|
layer_list[i].visible = true;
|
|
}
|
|
else {
|
|
layer_list[i].visible = false;
|
|
}
|
|
}
|
|
render();
|
|
}
|
|
|
|
// Utility functions
|
|
function onWindowResize() {
|
|
}
|
|
|
|
function render() {
|
|
renderer.render(scene, camera);
|
|
}
|
|
|
|
function setCameraZoom(bZoom) {
|
|
controls.enableZoom = bZoom;
|
|
}
|
|
|
|
function setCameraPan(bPan) {
|
|
controls.enablePan = bPan;
|
|
}
|
|
|
|
function setCameraRot(bRot) {
|
|
controls.enableRotate = bRot;
|
|
}
|
|
|
|
function setCameraAutoRot(bAutoRot) {
|
|
controls.autoRotate = bAutoRot;
|
|
}
|
|
|
|
function SetCameraPos(nPos) {
|
|
var nTraslFactor = 2;
|
|
var x; var y; var z;
|
|
y = GLBox3D.max.y; // fixed
|
|
switch (nPos) {
|
|
case 0:
|
|
x = GLBox3D.min.x;
|
|
z = 0.5 * (GLBox3D.min.z + GLBox3D.max.z);
|
|
break;
|
|
case 1:
|
|
x = GLBox3D.min.x;
|
|
z = GLBox3D.max.z;
|
|
break;
|
|
case 2:
|
|
x = 0.5 * (GLBox3D.min.x + GLBox3D.max.x);
|
|
z = GLBox3D.max.z;
|
|
break;
|
|
case 3:
|
|
x = GLBox3D.max.x;
|
|
z = GLBox3D.max.z;
|
|
case 4:
|
|
x = GLBox3D.max.x;
|
|
z = 0.5 * (GLBox3D.min.z + GLBox3D.max.z);
|
|
break;
|
|
case 5:
|
|
x = GLBox3D.max.x;
|
|
z = GLBox3D.min.z;
|
|
break;
|
|
case 6:
|
|
x = 0.5 * (GLBox3D.min.x + GLBox3D.max.x);
|
|
z = GLBox3D.min.z;
|
|
break;
|
|
case 7:
|
|
x = GLBox3D.min.x;
|
|
z = GLBox3D.min.z;
|
|
break;
|
|
default:
|
|
return;
|
|
}
|
|
|
|
x *= nTraslFactor;
|
|
y *= nTraslFactor;
|
|
z *= nTraslFactor;
|
|
camera.position.set(x, y, z);
|
|
//camera.rotation.set( Math.PI / -2, 0, Math.PI / -2) ;
|
|
const vtCenter = new THREE.Vector3(0, 0, 0);
|
|
GLBox3D.getCenter(vtCenter);
|
|
controls.target.set(vtCenter.x, vtCenter.y, vtCenter.z);
|
|
//controls.rotate( -90 * Math.PI / 180 ) ;
|
|
controls.update();
|
|
} |