From b5a7415becd2bb32e90e2219c6709946e29f124d Mon Sep 17 00:00:00 2001 From: "zaccaria.majid" Date: Thu, 19 Oct 2023 10:01:53 +0200 Subject: [PATCH] mancava adaptscenetocontest --- .../Web3D-Vue/Web3D_viewer/package-lock.json | 8 +- 3MF_test/Web3D-Vue/Web3D_viewer/package.json | 2 +- WebGl/draw/webgl_drawVue.js | 648 +++++++++++++----- 3 files changed, 473 insertions(+), 185 deletions(-) diff --git a/3MF_test/Web3D-Vue/Web3D_viewer/package-lock.json b/3MF_test/Web3D-Vue/Web3D_viewer/package-lock.json index 3f5640e..050bb27 100644 --- a/3MF_test/Web3D-Vue/Web3D_viewer/package-lock.json +++ b/3MF_test/Web3D-Vue/Web3D_viewer/package-lock.json @@ -10,7 +10,7 @@ "license": "MIT", "dependencies": { "vue": "^2.5.11", - "webgl-visualizer": "^1.2.231019-beta.950" + "webgl-visualizer": "^1.2.231019-beta.955" }, "devDependencies": { "babel-core": "^6.26.0", @@ -9296,9 +9296,9 @@ } }, "node_modules/webgl-visualizer": { - "version": "1.2.231019-beta.950", - "resolved": "https://nexus.steamware.net/repository/npm-group/webgl-visualizer/-/webgl-visualizer-1.2.231019-beta.950.tgz", - "integrity": "sha512-txlK2cD3nutUNNpTocqeKl54ZI5snjIRggw2SlxV8nXL+EIZ63DG5fEl1QBa9+PRlXzZKQ2AA/T3/j/jzhcqNQ==", + "version": "1.2.231019-beta.955", + "resolved": "https://nexus.steamware.net/repository/npm-group/webgl-visualizer/-/webgl-visualizer-1.2.231019-beta.955.tgz", + "integrity": "sha512-RrjA17Y51FcOjh/eoJ0av7+ShNcSkurKmerIvxSD+McwS3NbS+2qfX4IEWojQTATmqcLM/Gx4/i1IUolNAvWjQ==", "license": "ISC" }, "node_modules/webpack": { diff --git a/3MF_test/Web3D-Vue/Web3D_viewer/package.json b/3MF_test/Web3D-Vue/Web3D_viewer/package.json index 71a997d..00adba5 100644 --- a/3MF_test/Web3D-Vue/Web3D_viewer/package.json +++ b/3MF_test/Web3D-Vue/Web3D_viewer/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "vue": "^2.5.11", - "webgl-visualizer": "^1.2.231019-beta.950" + "webgl-visualizer": "^1.2.231019-beta.955" }, "browserslist": [ "> 1%", diff --git a/WebGl/draw/webgl_drawVue.js b/WebGl/draw/webgl_drawVue.js index 0586c6c..845f9be 100644 --- a/WebGl/draw/webgl_drawVue.js +++ b/WebGl/draw/webgl_drawVue.js @@ -1,25 +1,45 @@ import * as THREE from '../threeJsLib/three.module.js'; import { OrbitControls } from '../jsm/controls/OrbitControls.js'; import { ThreeMFLoader } from '../jsm/loaders/3MFLoader.js'; +import { Rhino3dmLoader } from '../jsm/addons/loaders/3DMLoader.js'; // VARIABILI DI CONTROLLO + +// *** div dimensions *** var m_divStartDimX = 500; var m_divStartDimY = 400; + var fName = "Cubo.3mf"; -var m_fileSource = ''; +//var fileType = "3MF"; + +// *** camera settings *** var m_bZoom = true; var m_bPan = true; var m_bRot = true; -var m_bAutoRot = false; -var m_bGrid_v1 = true; -var m_nCameraStartPos = 8; -//var useInSlider = false; var m_nCamPos = 0; +var m_nCameraStartPos = 8 ; +var m_bIsOrtographic = true ; +// *** index blender *** var m_nStartL = 0; var m_nEndL = 0; -var m_bIsOrtographic = true ; + +// *** frame settings *** +var m_bShowFrame = true ; +var m_lFrameLen = 100 ; +var m_dFrameFat = 2; // raggio del cilindro +var m_bFrameType = 2 ; + +var m_bAutoRot = false; + +// *** grid settings *** +var m_bShowGrid = true ; +var m_bInfGrid = true ; + +// *** Direction Arrows *** +var m_bShowPrintDir = true ; + +//var useInSlider = false; var counter = 0; -var modelsDir = ""; let activeCamera, scene, renderer, controls, ORIG, perspectiveCamera, orthographicCamera; @@ -27,16 +47,25 @@ var layer_list = []; const GLBox3D = new THREE.Box3(); // Box3D globale delle geometrie //init(); class webgl_original { - async initcall({ _dimX, _dimY, _fileName, _showLimitedGrid, _isOrtographic, _modelsDir}) { + async initcall({ _dimX, _dimY, _fileName, _showInfiniteGrid, _fileType}) { m_divStartDimX = _dimX; m_divStartDimY = _dimY; fName = _fileName; - m_bGrid_v1 = _showLimitedGrid; - m_bIsOrtographic = _isOrtographic; - modelsDir = _modelsDir; + m_bInfGrid = _showInfiniteGrid; //console.log(fName) setLoaders(); - await init(); + if(_fileType.toUpperCase() == '3MF') + { + await init3mf(); + } + else if(_fileType.toUpperCase() == '3DM') + { + await init3dm(); + } + else + { + console.log('File type not supported') + } } setCameraType(){ @@ -99,11 +128,11 @@ function setLoaders() { //if (useInSlider) { - //mother.appendChild(sliderInput); - //sliderInput.setAttribute('id', 'refre_slider'); - //sliderInput.setAttribute('hidden', true); - //sliderInput.type = 'range'; - //sliderInput.min = '0'; + 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); @@ -169,7 +198,7 @@ function setLoaders() { cDiv[i].style.border = '#afc5d6'; cDiv[i].style.backgroundSize = 'contain'; - cDiv[i].style.backgroundImage = 'url(../node_modules/webgl-visualizer/styles/LogoClassic_NoText.png)' + cDiv[i].style.backgroundImage = 'url(./styles/LogoClassic_NoText.png)' } } @@ -187,13 +216,13 @@ function setLoaders() { } -function init() { - const manager = new THREE.LoadingManager(); +function init3mf() { + const manager = new THREE.LoadingManager(); const loader = new ThreeMFLoader(manager); let startTime = performance.now(); return new Promise(() => { setTimeout(() => { - loader.load(modelsDir + fName, function (object) { + loader.load('./models/3mf/' + fName, function (object) { object.rotation.set(-Math.PI / 2, 0, 0); object.traverse(function (child) { child.castShadow = true; @@ -204,173 +233,203 @@ function init() { layer_list.push(child); } //console.log(layer_list); - AdaptSceneToContest(); + AdaptSeceneToContest(); // Adapting Scene to contest let endTime = performance.now(); let timeElapsed = endTime - startTime; - console.log('init in : ' + timeElapsed) + console.log('init3mf in : ' + timeElapsed) }); }, 0); }); } -function AdaptSceneToContest() { - 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); - - perspectiveCamera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 300000 ); - //perspectiveCamera.up = new THREE.Vector3( 0, 0, 1) ; - orthographicCamera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, - window.innerHeight / 2, window.innerHeight / - 2, - -300000, 300000) ; - //orthographicCamera.up = new THREE.Vector3( 0, 0, 1) ; - if ( ! m_bIsOrtographic) - activeCamera = perspectiveCamera ; - else - activeCamera = orthographicCamera ; - activeCamera.position.set( 2 * vtBoxDim.x, 2 * vtBoxDim.y, 2 * vtBoxDim.z) ; - activeCamera.lookAt( vtCenter.x, vtCenter.y, vtCenter.z) ; - scene.add( activeCamera) ; - - 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(activeCamera, renderer.domElement); - controls.addEventListener('change', render); - - controls.update(); - - window.addEventListener('resize', onWindowResize); - -// calcolo origine - const points_array = [ new THREE.Vector3( 0, 0, 0)] ; - var ORIG_Geometry = new THREE.BufferGeometry() ; - ORIG_Geometry.setFromPoints( points_array) ; - var ORIG_Material = new THREE.PointsMaterial({ size: 5, sizeAttenuation : true, color : new THREE.Color( 0x000000)}); - ORIG = new THREE.Points( ORIG_Geometry, ORIG_Material) ; - SetOrig( ORIG) ; - - // creazione sistema di riferimento nell'origine - const axesHelper = new THREE.AxesHelper( 75 ) ; - axesHelper.rotation.set( -Math.PI/2, 0 ,0) ; - axesHelper.position.set( ORIG.position.x, ORIG.position.y, ORIG.position.z) ; - scene.add( axesHelper ); - - // creazione della griglia (V1 = finita, V2 = infinita) - const size = 1000000 ; - const divisions = 10000 ; - if ( ! m_bGrid_v1) { - // GRIGLIA INFINITA - const gridHelper = new THREE.GridHelper( size, divisions) ; - gridHelper.position.set( ORIG.position.x, ORIG.position.y, ORIG.position.z) ; - gridHelper.material.transparent = true ; - gridHelper.material.opacity = 0.25 ; - setFog() ; - scene.add( gridHelper) ; - } - else { - // GRIGLIA FINITA - // prendo dimensione del Box - var dDimX = Math.abs( GLBox3D.max.x - GLBox3D.min.x) ; - var dDimY = Math.abs( GLBox3D.max.y - GLBox3D.min.y) ; - var dDimZ = Math.abs( GLBox3D.max.z - GLBox3D.min.z) ; - var dDim = 1.5 * Math.sqrt( dDimX * dDimX + dDimY * dDimY + dDimZ * dDimZ) ; - const gridHelper = new THREE.GridHelper( dDim, Math.ceil( 0.1 * dDim)) ; - gridHelper.position.set( ORIG.position.x + 0.5 * dDim , ORIG.position.y, ORIG.position.z - 0.5 * dDim) ; - gridHelper.material.transparent = true ; - gridHelper.material.opacity = 0.45 ; - scene.add( gridHelper) ; +function init3dm(){ + return new Promise(() => { + setTimeout(() => { + loader.setLibraryPath( 'https://cdn.jsdelivr.net/npm/rhino3dm@7.15.0/' ) ; + loader.load( './models/3dm/Ex' + FileNumber + '.3dm', m_nApproxIndex, function ( object ) { + object.traverse( function( child) { + child.castShadow = true ; + }) ; - } + // Ref systems + const Mat_GlobToLoc = new THREE.Matrix4() ; //<---- rotations for XY plane from Extrusion + const Mat_LocToGlob = new THREE.Matrix4() ; //<---- rotations for Extrusion from XY plane + const Mat_ThreeJs_Frame = new THREE.Matrix4() ; // <----- rotations from XYZ ref system to ThreeJS system + Mat_ThreeJs_Frame.set( 1, 0, 0, 0, + 0, 0, 1, 0, + 0, -1, 0, 0, + 0, 0, 0, 1) ; + var Mat_ToScene = new THREE.Matrix4() ; + // Extrusion settings for curves + const extrudeSettings = { + steps: 1, + depth: 0, + bevelEnabled: false, + bevelThickness: 1, + bevelSize: 1, + bevelOffset: 0, + bevelSegments: 1 + } ; + // loading entities... + for ( var i = 0 ; i < object.children.length ; ++ i) { + // getting i-th object + var child = object.children[i] ; + //console.log( child); - render(); + // READING A POINT TYPE ----------------------------------------------------------------- + if ( child.type == 'Points') { + try { + if ( child.name != 'Orig') { + console.log( 'Not a valid origin') ; + return false ; + } + // start layer + nStartLayer = parseInt( child.userData.attributes.layerIndex) ; + // ORIGIN ------------------------ + var coord = child.userData.attributes.geometry.location ; + var orig_x = parseFloat( coord[0]) ; + var orig_y = parseFloat( coord[2]) ; + var orig_z = - parseFloat( coord[1]) ; + ORIG = new THREE.Vector3( orig_x, orig_y, orig_z) ; + // EXTRUSION --------------------- + var bOk_ext = false ; + if ( child.userData.attributes.userStrings[1][0] == 'SlicingDir') { + var sExtr = child.userData.attributes.userStrings[1][1] ; + if ( sExtr != "" ) { + let sExtr_arr = sExtr.split(',') ; + if ( sExtr_arr.length == 3) { + var dExtr_x = parseFloat( sExtr_arr[0]) ; + var dExtr_y = parseFloat( sExtr_arr[1]) ; + var dExtr_z = parseFloat( sExtr_arr[2]) ; + vtExtr = new THREE.Vector3( dExtr_x, dExtr_y, dExtr_z) ; + bOk_ext = true ; + } + } + } + if ( ! bOk_ext) { + console.log( ' Not a valid Extrusion') ; + return false ; + } + var Z_AX = new THREE.Vector3( vtExtr.x, vtExtr.y, vtExtr.z) ; + var X_AX = new THREE.Vector3() ; + var Y_AX = new THREE.Vector3() ; + if ( ! Z_AX.equals( new THREE.Vector3( 0, 0, 1))) { + X_AX.crossVectors( new THREE.Vector3( 0, 0, 1), Z_AX) ; + Y_AX.crossVectors( Z_AX, X_AX) ; + } + else { + X_AX = new THREE.Vector3( 1, 0, 0) ; + Y_AX = new THREE.Vector3( 0, 1, 0) ; + } + Mat_GlobToLoc.set( X_AX.x, X_AX.y, X_AX.z, 0, + Y_AX.x, Y_AX.y, Y_AX.z, 0, + Z_AX.x, Z_AX.y, Z_AX.z, 0, + 0, 0, 0, 1) ; + Mat_LocToGlob.copy( Mat_GlobToLoc) ; + Mat_LocToGlob.invert() ; + Mat_ToScene.multiplyMatrices( Mat_ThreeJs_Frame, Mat_LocToGlob) ; + // STRAND ------------------------- + if ( child.userData.attributes.userStrings[0][0] == 'StrandH') { + dStrand = - parseFloat( child.userData.attributes.userStrings[0][1]) ; + extrudeSettings.depth = dStrand ; + } + else { + console.log( ' Not a valid Strand') ; + return false ; + } + } + catch( error) { + console.log( 'Orig, Extrusion or Strand missing or not implemented') ; + return false ; + } + } + // READING A LINE ----------------------------------------------------------------------- + else if ( child.type == 'Line') { + // Parsing the extrusion and the Layer of the curve + try { + var nLayer = parseInt( child.userData.attributes.layerIndex) - nStartLayer ; + if ( nLayer < 0) + return false ; + + var points_array = child.geometry.attributes.position.array ; + //var ptPrec ; + const shape = new THREE.Shape() ; + for ( var v = 0 ; v < points_array.length ; v += 3) { + var Zact ; + var vtCoord = new THREE.Vector4( points_array[v], points_array[v+1], points_array[v+2], 1) ; + vtCoord.applyMatrix4( Mat_GlobToLoc) ; + //if ( v != 0 && v < points_array.length - 3 && + // (( vtCoord.x - ptPrec.x) * ( vtCoord.x - ptPrec.x) + + // ( vtCoord.y - ptPrec.y) * ( vtCoord.y - ptPrec.y) + + // ( vtCoord.z - ptPrec.z) * ( vtCoord.z - ptPrec.z)) < 10) + // continue ; + if ( v == 0) { + shape.moveTo( vtCoord.x, vtCoord.y) ; + Zact = vtCoord.z ; + } + else + shape.lineTo( vtCoord.x, vtCoord.y) ; + //ptPrec = new THREE.Vector4( vtCoord.x, vtCoord.y, vtCoord.z, 1) ; + } + var cCol = child.material.color.clone() ; + if ( nLayer%2 == 0) { + cCol.lerp( new THREE.Color( 0x000000 ), 0.25) ; + } + const geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings) ; + const material = new THREE.MeshLambertMaterial({ color: cCol, + wireframe : false, + shadowSide : THREE.DoubleSide}) ; + const mesh = new THREE.Mesh( geometry, material) ; + mesh.translateZ( Zact) ; + //mesh.applyMatrix4( Mat_LocToGlob) ; + //mesh.applyMatrix4( Mat_ThreeJs_Frame) ; + mesh.applyMatrix4( Mat_ToScene) ; + mesh.nLayer = nLayer ; + mesh.isArrow = false ; + layer_list.push( mesh) ; + + } catch( err) { + console.log( ' Not a valid Layer for paths') ; + return false ; + } + } + // READING ARROW'S MESH + else if ( child.type == 'Mesh') { + + try { + if ( child.name != 'Arrow') { + //console.log( 'Not a valid Arrow direction') ; + //return false ; + child.nLayer = 1 ; + layer_list.push( child) ; + continue ; + } + var nLayer = parseInt( child.userData.attributes.layerIndex) - nStartLayer ; + if ( nLayer < 0) + return false ; + child.isArrow = true ; + child.applyMatrix4( Mat_ThreeJs_Frame) ; + child.nLayer = nLayer ; + child.material.color = new THREE.Color( 0xff0000) ; + layer_list.push( child) ; + + } catch( e) { + console.log( 'Not a valid Arrow direction') ; + return false ; + } + } + // READING OTHER ENTITY -------------------- + else + continue ; - - // TEST =================================== - setCameraZoom(m_bZoom); - setCameraPan(m_bPan); - setCameraRot(m_bRot); - setCameraAutoRot(m_bAutoRot); - SetCameraPos( m_nCameraStartPos, ORIG) ; - // ========================================= - - //console.log('aggiunto 1'); + } + AdaptSeceneToContest() ; + console.log(new Date()) ; + }) ; + }, 0) + }) } function refreshElement(nStart, nEnd) { @@ -390,7 +449,120 @@ function refreshElement(nStart, nEnd) { // Utility functions function onWindowResize() { } +function AdaptSeceneToContest() { + + scene = new THREE.Scene(); + scene.background = new THREE.Color( 0xa0a0a0) ; + + // Global Box and elements on scene ---------- + for ( var i = 0 ; i < layer_list.length ; ++ i) { + if ( layer_list[i].children[0].type == 'Mesh') { + 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") { + if ( parseInt( layer_list[i].children[0].nLayer)%2 == 0) + layer_list[i].children[0].material.color.lerp( new THREE.Color( 0x000000 ), 0.25) ; + layer_list[i].children[0].isArrow = ( layer_list[i].children[0].name == 'Arrow') + scene.add( layer_list[i]) ; + } + } + else if ( layer_list[i].type == 'Vector3') + ORIG = layer_list[i].children[0].clone() ; + } + + // 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) ; + // orthographic and perspective camera ------ + var perspectiveCamera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 300000 ); + var orthographicCamera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, + window.innerHeight / 2, window.innerHeight / - 2, + -300000, 300000) ; + if ( ! m_bIsOrtographic) + activeCamera = perspectiveCamera ; + else + activeCamera = orthographicCamera ; + activeCamera.position.set( 2 * vtBoxDim.x, 2 * vtBoxDim.y, 2 * vtBoxDim.z) ; + activeCamera.lookAt( vtCenter.x, vtCenter.y, vtCenter.z) ; + scene.add( activeCamera) ; + + // Hemisphere light -------- + const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d ); + hemiLight.position.set( vtCenter.x, vtCenter.y + 2 * vtBoxDim.y, vtCenter.z); + scene.add( hemiLight ); + + // direction light -------- + 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 ); + + // render settings --------- + renderer = new THREE.WebGLRenderer( { antialias: true }); + renderer.setPixelRatio( window.devicePixelRatio ); + var container = document.getElementById( 'WebGL-3mfExport') ; + container.style.height = m_divStartDimY + "px"; + container.style.width = m_divStartDimX + "px"; + document.body.appendChild( container ); + renderer.setSize( m_divStartDimX, m_divStartDimY ); + renderer.shadowMap.enabled = true; + renderer.shadowMap.type = THREE.PCFSoftShadowMap; + container.appendChild( renderer.domElement ); + + controls = new OrbitControls( activeCamera, renderer.domElement ); + controls.addEventListener( 'change', render ); + controls.update() ; + + // Orig conversion ----- + const points_array = [ new THREE.Vector3( 0, 0, 0)] ; + var ORIG_Geometry = new THREE.BufferGeometry() ; + ORIG_Geometry.setFromPoints( points_array) ; + var ORIG_Material = new THREE.PointsMaterial({ size: 5, sizeAttenuation : true, color : new THREE.Color( 0x000000)}); + var ptORIG = new THREE.Points( ORIG_Geometry, ORIG_Material) ; + ptORIG.position.x = ORIG.x ; + ptORIG.position.y = ORIG.z ; + ptORIG.position.z = - ORIG.y ; + + // Frame + AddFrame( ptORIG) ; + + // Grid + AddGrid( ptORIG) ; + + // Render + render() ; + + + // inputs -------------- + setCameraZoom( m_bZoom) ; + setCameraPan( m_bPan) ; + setCameraRot( m_bRot) ; + SetCameraPos( m_nCameraStartPos, ORIG) ; + /*document.getElementById('bt_refresh').addEventListener('click', function( e){ + ManageSceneElements( e) ; + }) ; + document.getElementById( 'bt_resetPos').addEventListener( 'click', function() { + SetCameraPos( m_nCameraStartPos, ORIG) ; + }) ; + document.getElementById( 'bt_camera').addEventListener( 'click', function() { + toggleCamera( perspectiveCamera, orthographicCamera) ; + }) ; + document.getElementById( 'ck_dir').addEventListener( 'change', function( e) { + ManageSceneElements( e) ; + })*/ +} function render() { renderer.render(scene, activeCamera); } @@ -481,8 +653,124 @@ function SetOrig( ORIG) { // ----------------------- //scene.add( ORIG) ; } + function setFog() { - var dNear = GLBox3D.max.x + 3 * ( GLBox3D.max.x - GLBox3D.min.x) ; - var dFar = 10000 ; - scene.fog = new THREE.Fog( 0xa0a0a0, 20000, 30000); -} \ No newline at end of file + // var dNear = GLBox3D.max.x + 3 * ( GLBox3D.max.x - GLBox3D.min.x) ; + // var dFar = 10000 ; + // scene.fog = new THREE.Fog( 0xa0a0a0, 20000, 30000); +} + +function AddFrame( ptORIG) { + + if ( ! m_bShowFrame) + return ; + + if ( m_bFrameType == 0) { + const axesHelper = new THREE.AxesHelper( m_lFrameLen) ; + axesHelper.rotation.set( -Math.PI/2, 0 , 0) ; + axesHelper.position.set( ptORIG.position.x, ptORIG.position.y, ptORIG.position.z) ; + scene.add( axesHelper ) ; + } + else if ( m_bFrameType == 1) { + var vtDirs = [ new THREE.Vector3( 1, 0, 0), new THREE.Vector3( 0, 0, -1), new THREE.Vector3( 0, 1, 0)] ; + var vtCols = [ new THREE.Color( 0xff0000), new THREE.Color( 0x00ff00), new THREE.Color( 0x0000ff)] ; + var vtORIG = new THREE.Vector3( ptORIG.position.x, ptORIG.position.y, ptORIG.position.z) ; + for ( var i = 0 ; i < 3 ; ++ i) { + const arrowHelper = new THREE.ArrowHelper( vtDirs[i], vtORIG, m_lFrameLen, vtCols[i]) ; + scene.add( arrowHelper ) ; + } + } + else if ( m_bFrameType == 2) { + var vtCols = [ new THREE.Color( 0x0000ff), new THREE.Color( 0xff0000), new THREE.Color( 0x00ff00)] ; + for ( var i = 0 ; i < 3 ; ++ i) { + // cylinder ---- + const fr_geometry_cyl = new THREE.CylinderGeometry( m_dFrameFat, m_dFrameFat, 0.8 * m_lFrameLen, 32) ; + const fr_material = new THREE.MeshBasicMaterial({color: vtCols[i]}) ; + const fr_cylinder = new THREE.Mesh( fr_geometry_cyl, fr_material) ; + fr_cylinder.position.set( ptORIG.position.x, ptORIG.position.y, ptORIG.position.z) ; + if ( i == 1) + fr_cylinder.rotation.set( 0, 0, -Math.PI/2) ; + if ( i == 2) + fr_cylinder.rotation.set( -Math.PI/2, 0, 0) ; + scene.add( fr_cylinder) ; + fr_cylinder.translateY( 0.4 * m_lFrameLen) ; + // pyramid + const fr_geometry_cone = new THREE.CylinderGeometry( 0, 2 * m_dFrameFat, 0.2 * m_lFrameLen, 32) ; + const fr_cone = new THREE.Mesh( fr_geometry_cone, fr_material) ; + fr_cone.position.set( ptORIG.position.x, ptORIG.position.y, ptORIG.position.z) ; + if ( i == 1) + fr_cone.rotation.set( 0, 0, -Math.PI/2) ; + if ( i == 2) + fr_cone.rotation.set( -Math.PI/2, 0, 0) ; + scene.add( fr_cone) ; + fr_cone.translateY( 0.9 * m_lFrameLen) ; + } + // Origin + const fr_orig_geometry = new THREE.SphereGeometry( 2 * m_dFrameFat, 32, 16) ; + const fr_orig_material = new THREE.MeshBasicMaterial( {color: 0x00000}) ; + const fr_sphere = new THREE.Mesh( fr_orig_geometry, fr_orig_material) ; + fr_sphere.position.set( ptORIG.position.x, ptORIG.position.y, ptORIG.position.z) ; + scene.add( fr_sphere) ; + } + else + console.log( 'Frame type not defined') ; +} + +function AddGrid( ptORIG) { + + if ( ! m_bShowGrid) + return ; + + const size = 1000000 ; + const divisions = 10000 ; + if ( m_bInfGrid) { + const gridHelper = new THREE.GridHelper( size, divisions) ; + gridHelper.position.set( ptORIG.position.x, ptORIG.position.y, ptORIG.position.z) ; + gridHelper.material.transparent = true ; + gridHelper.material.opacity = 0.25 ; + setFog() ; + scene.add( gridHelper) ; + } + else { + var dDimX = Math.abs( GLBox3D.max.x - GLBox3D.min.x) ; + var dDimY = Math.abs( GLBox3D.max.y - GLBox3D.min.y) ; + var dDimZ = Math.abs( GLBox3D.max.z - GLBox3D.min.z) ; + var dDim = 1.5 * Math.sqrt( dDimX * dDimX + dDimY * dDimY + dDimZ * dDimZ) ; + const gridHelper = new THREE.GridHelper( dDim, Math.ceil( 0.1 * dDim)) ; + gridHelper.position.set( ptORIG.position.x + 0.5 * dDim , ptORIG.position.y, ptORIG.position.z - 0.5 * dDim) ; + gridHelper.material.transparent = true ; + gridHelper.material.opacity = 0.45 ; + scene.add( gridHelper) ; + } +} + +function ManageSceneElements( e) { + if ( e.srcElement.id == 'bt_refresh') { + nLayerStart = parseInt( document.getElementById('Layer_Start').value) ; + nLayerEnd = parseInt( document.getElementById('Layer_End').value) ; + for ( var i = 0 ; i < layer_list.length ; ++ i) { + if ( parseInt( layer_list[i].nLayer) >= nLayerStart && + parseInt( layer_list[i].nLayer) <= nLayerEnd) { + if ( layer_list[i].isArrow) + layer_list[i].visible = document.getElementById( 'ck_dir').checked ; + else + layer_list[i].visible = true ; + } + else { + layer_list[i].visible = false ; + } + } + } + else if ( e.srcElement.id = 'ck_dir') { + for ( var i = 0 ; i < layer_list.length ; ++ i) { + if ( layer_list[i].isArrow) { + if ( layer_list[i].nLayer >= nLayerStart && + layer_list[i].nLayer <= nLayerEnd) + layer_list[i].visible = document.getElementById( 'ck_dir').checked ; + else + layer_list[i].visible = false ; + } + } + } + render() ; + } \ No newline at end of file