{"id":3786,"date":"2025-02-15T18:16:38","date_gmt":"2025-02-15T18:16:38","guid":{"rendered":"https:\/\/www.meritgear.eu\/?page_id=3786"},"modified":"2025-05-04T10:24:09","modified_gmt":"2025-05-04T10:24:09","slug":"3d-gallery-testing-2","status":"publish","type":"page","link":"https:\/\/www.meritgear.eu\/nl\/3d-gallery-testing-2\/","title":{"rendered":"3D gallery testing 2"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"3786\" class=\"elementor elementor-3786\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dc0ce7f e-con-full e-flex e-con e-parent\" data-id=\"dc0ce7f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c1df54d elementor-widget__width-inherit elementor-widget elementor-widget-spacer\" data-id=\"c1df54d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f56bdc6 e-con-full e-flex e-con e-parent\" data-id=\"f56bdc6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-444c231 e-con-full e-flex e-con e-child\" data-id=\"444c231\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9d83460 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"9d83460\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"canvas-container\" style=\"width: 100%; height: 100vh;  top: 0; left: 0;  overflow: hidden; z-index: -1; border:1px solid #FF0000;\">\r\n    <canvas id=\"cubeCanvas\" style=\"width: 100%; height: 100%; border:1px solid #90EE90;overflow: hidden; \">\r\n \r\n    <\/canvas>\r\n    <div id=\"loading-screen\" style=\"width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 1000;\">\r\n        <div style=\"text-align: center; color: white;\">\r\n\r\n            <!--this is where you place the url of the placeholder image while the model loads up.\r\n            -->\r\n\r\n            <img decoding=\"async\" src=\"https:\/\/www.meritgear.eu\/wp-content\/uploads\/2025\/02\/futuristic-tunnel-corridor-with-neon-glowing-light-2023-11-27-04-53-49-utc.jpeg\" alt=\"Loading\" style=\"max-width: 100%; max-height: 300px;\" title=\"3D gallery testing 2\">\r\n            <p id=\"loading-progress\">Loading 3D Model: 0%<\/p>\r\n        <\/div>\r\n    <\/div>\r\n    \r\n<\/div>\r\n\r\n<!-- Three.js core scripts -->\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/build\/three.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/loaders\/GLTFLoader.js\"><\/script>\r\n\r\n<!-- <script async src=\"https:\/\/unpkg.com\/es-module-shims@2.0.10\/dist\/es-module-shims.js\">\r\n\r\n    \r\n\r\n<\/script> -->\r\n\r\n<!-- Postprocessing scripts -->\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/postprocessing\/EffectComposer.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/postprocessing\/RenderPass.js\"><\/script>\r\n<!-- <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/postprocessing\/OutlinePass.js\"><\/script> -->\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/postprocessing\/UnrealBloomPass.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/shaders\/CopyShader.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/shaders\/LuminosityHighPassShader.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/postprocessing\/ShaderPass.js\"><\/script>\r\n\r\n<script src= \"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/libs\/dat.gui.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/controls\/OrbitControls.js\"><\/script>\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/controls\/DragControls.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/controls\/TransformControls.js\"><\/script>\r\n\r\n\r\n\r\n<script> \r\n   \/\/https:\/\/www.meritgear.eu\/wp-content\/uploads\/2025\/05\/ripstop-cube-website.glb\r\n   \/\/https:\/\/www.meritgear.eu\/wp-content\/uploads\/2025\/05\/Rescaled-V3-Website.glb\r\n\r\n    \/\/const MODEL_URL = 'https:\/\/www.meritgear.eu\/wp-content\/uploads\/2025\/03\/Framework-frame.glb';\r\n    const MODEL_URL = 'https:\/\/www.meritgear.eu\/wp-content\/uploads\/2025\/03\/Frame-alone.glb'      \/\/Frame https:\/\/www.meritgear.eu\/wp-content\/uploads\/2025\/03\/Frame-alone.glb\r\n    const MODEL_URL2 = 'https:\/\/www.meritgear.eu\/wp-content\/uploads\/2025\/05\/Rescaled-V3-Website.glb' \/\/https:\/\/www.meritgear.eu\/wp-content\/uploads\/2025\/03\/Frame-bag-alone.glb https:\/\/www.meritgear.eu\/wp-content\/uploads\/2025\/05\/rescaled-Mickey-pack-for-website-v2.glb\r\n    const MODEL_URL3 = 'https:\/\/www.meritgear.eu\/wp-content\/uploads\/2025\/03\/Color-Swatches.glb'\r\n    const MODEL_URL4 = 'https:\/\/www.meritgear.eu\/wp-content\/uploads\/2025\/03\/Sliding-Pieces.glb'\r\n \r\n\r\n    const CAMERA_FOV = 30; \/\/55\r\n    const CAMERA_NEAR =1;\r\n    const CAMERA_FAR = 20000;\r\n    const CAMERA_DISTANCE_FACTOR_DESKTOP =1000;\r\n    const CAMERA_DISTANCE_FACTOR_MOBILE = 10;\r\n    const CAMERA_OFFSET_X = 0;\r\n    const CAMERA_OFFSET_Y = 0;\r\n\r\n    \/\/ \/\/ Updated light settings\r\n    const DIRECTIONAL_LIGHT_COLOR = 0xffffff;\r\n    const DIRECTIONAL_LIGHT_INTENSITY = 1;\r\n    const AMBIENT_LIGHT_COLOR = 0xffffff;  \/\/0xffffff\r\n    const AMBIENT_LIGHT_INTENSITY = .2;\r\n\r\n\r\n    \/\/ \/\/ background colour settings\r\n    var BACKGROUND_COLOUR_SCENE = 0x000000; \/\/ White background\r\n    const BACKGROUND_COLOUR_TRANSPARENCE = 1; \/\/ Fully opaque\\\r\n    \r\n    \/\/ \/\/ Grid Lay-out\r\n    const size = 2000;\r\n    const division = 50;\r\n\r\n    const pointer = new THREE.Vector2();\r\n    \r\n    const black = 0x363636\r\n    const blue = 0x0b74d6\r\n    const brown = 0xa48657\r\n    const dark_blue = 0x2d3c65\r\n    const grey = 0x5b6767\r\n    const hot_orange = 0xf85414\r\n    \/\/const liteskin = \r\n    const olive_green = 0x586442\r\n    const purple = 0x281052\r\n    const red = 0xa11a1b\r\n    \/\/const red = {r:161\/255, g: 26\/255, b:27\/255}\r\n    const turquoise = 0x10b4c5\r\n    const white = 0xe5ecef\r\n    const yellow = 0xf1bd04\r\n\r\n    const hov_on_roughness_val = .6\r\n    const hov_on_metalness_val = .25\r\n    const hov_off_roughness_val = 1\r\n    const hov_offmetalness_val = 0\r\n    \r\n\/\/----------------\r\n\/\/ End of controls\r\n\/\/----------------\r\n\r\n    let canvas, renderer, scene, camera, light, ambientLight, additionalLight;\r\n    let  model, model2, model3, controls, stats, INTERSECTED;\r\n\r\n    var objects = [];\r\n\r\n    function setupScene(){\r\n\r\n        raycaster = new THREE.Raycaster();\r\n        \r\n        canvas = document.getElementById('cubeCanvas');\r\n        renderer = new THREE.WebGLRenderer({canvas: canvas, alpha: false, antialias: true });\r\n        \r\n        renderer.outputEncoding = THREE.LinearEncoding;\r\n\r\n        \r\n\r\n        \/\/renderer.outputColorSpace = THREE.SRGBColorSpace;\r\n        \/\/renderer.setSize(window.innerWidth, window.innerHeight);\r\n        \/\/renderer.setSize(canvas.clientWidth, canvas.clientHeight);\r\n      \r\n        \/\/renderer.setClearColor(0x000000);\r\n        \/\/renderer.setClearColor(BACKGROUND_COLOUR_SCENE, BACKGROUND_COLOUR_TRANSPARENCE);\r\n        \/\/renderer.setPixelRatio(window.devicePixelRatio);\r\n        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\r\n        \r\n        \/\/ renderer.shadowMap.enabled = true;\r\n        \/\/ renderer.shadowMap.type = THREE.PCFSoftShadowMap;\r\n\r\n        \/\/document.body.appendChild(renderer.domElement);\r\n\r\n\t\tdocument.addEventListener( 'mousemove', onPointerMove );\r\n        \r\n        scene = new THREE.Scene();\r\n    \r\n        \/\/scene.background = new THREE.Color(BACKGROUND_COLOUR_SCENE);\r\n\r\n        const gridHelper = new THREE.GridHelper(size, division);\r\n        scene.add(gridHelper);\r\n\r\n        \/\/ camera = new THREE.PerspectiveCamera(45, window.innerWidth \/ window.innerHeight, 1, 1000);\r\n        camera = new THREE.PerspectiveCamera(CAMERA_FOV, canvas.clientWidth \/ canvas.clientHeight, CAMERA_NEAR, CAMERA_FAR);\r\n        camera.position.set(-43.803961179028384, 521.9726317334176, 1957.8070010684255); \/\/-100, 550, 1000\r\n\r\n        controls = new THREE.OrbitControls(camera, renderer.domElement);\r\n        controls.enableDamping = true;\r\n        controls.enablePan = false;\r\n        controls.minDistance = 5;\r\n        controls.maxDistance = 30000;\r\n        controls.minPolarAngle = 0.5;\r\n        controls.maxPolarAngle = 1.5;\r\n        controls.autoRotate = false;\r\n        controls.target = new THREE.Vector3(41.6, 382.5, -7.1); \/\/ Rotate around Center of Object \r\n        \/\/controls.update();\r\n\r\n        \/\/SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians, penumbra : Float, decay : Float )\r\n        const spotLight = new THREE.SpotLight(0xffffff, 1, 0, 0.22, 1); \r\n        spotLight.position.set(400, 1500, 100);\r\n        spotLight.castShadow = true;\r\n        spotLight.shadow.bias = -0.0001;\r\n        \/\/scene.add(spotLight);\r\n        \r\n        \/\/ Use updated light settings (Kan mogelijk weg)\r\n        ambientLight = new THREE.AmbientLight(AMBIENT_LIGHT_COLOR, AMBIENT_LIGHT_INTENSITY);\r\n        scene.add(ambientLight);\r\n\r\n        const x = 500;\r\n        const y = 500;\r\n        const z = 800;\r\n\r\n        geometry = new THREE.BoxGeometry( 10, 10, 10 );\r\n        material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );\r\n        cube1 = new THREE.Mesh( geometry, material );\r\n        cube1.position.set(x, y, z);\r\n        cube2 = new THREE.Mesh( geometry, material );\r\n        cube2.position.set(-x, y, z);\r\n        cube3 = new THREE.Mesh( geometry, material );\r\n        cube3.position.set(x, y, -z);\r\n        cube4 = new THREE.Mesh( geometry, material );\r\n        cube4.position.set(-x, y, -z);\r\n        scene.add( cube1, cube2, cube3, cube4 );\r\n\r\n        light1 = new THREE.DirectionalLight(DIRECTIONAL_LIGHT_COLOR, DIRECTIONAL_LIGHT_INTENSITY);\r\n        light1.position.set(x, y, z);\r\n        scene.add(light1);\r\n\r\n        light2 = new THREE.DirectionalLight(DIRECTIONAL_LIGHT_COLOR, DIRECTIONAL_LIGHT_INTENSITY);\r\n        light2.position.set(-x, y, z);\r\n        scene.add(light2);\r\n\r\n        light3 = new THREE.DirectionalLight(DIRECTIONAL_LIGHT_COLOR, DIRECTIONAL_LIGHT_INTENSITY);\r\n        light3.position.set(x, y, -z);\r\n        scene.add(light3);\r\n\r\n        light4 = new THREE.DirectionalLight(DIRECTIONAL_LIGHT_COLOR, DIRECTIONAL_LIGHT_INTENSITY);\r\n        light4.position.set(-x, y, -z);\r\n        scene.add(light4);\r\n\r\n\r\n\r\n\r\n\/\/         renderer.setAnimationLoop(()=>{\r\n\/\/ \tobjects.forEach(o => {\r\n\/\/         \/\/console.log(o)\r\n\/\/   \to.userData.update();\r\n\/\/     \/\/console.log(o.userData)\r\n\/\/   })\r\n\/\/ \trenderer.render(scene, camera);\r\n\/\/ })\r\n\r\n    \r\n\r\n        const controls1 = new THREE.DragControls( objects, camera, renderer.domElement );\r\n        \r\n\/\/ add event listener to highlight dragged objects\r\n\r\ncontrols1.addEventListener( 'hoveron', function ( event ) {\r\n    \/\/scene.getObjectByName('Top').material.emissive.setHex(0x39FF14)\r\n    \/\/ let lever = true;\r\n    \/\/ var counter = 0;\r\n    \/\/ var i = 0\r\n    if (event.object.name == 'P1'){\r\n        \r\n\/\/         console.log(lever)\r\n\/\/         setInterval(function(){\r\n\/\/     \/\/ do your thing\r\n\/\/         if (lever == true){\r\n\/\/             counter++;\r\n\/\/             i = i + 0.005\r\n\/\/             scene.getObjectByName('Top').material.emissiveIntensity = i\r\n\/\/             \/\/console.log('a:' + i)\r\n\/\/             if(counter == 40) {\r\n\/\/                  lever = false\r\n\/\/         }}\r\n\/\/         else{\r\n\/\/             counter--;\r\n\/\/             i = i - 0.005\r\n\/\/             scene.getObjectByName('Top').material.emissiveIntensity = i\r\n\/\/             \/\/console.log('b:' + i)\r\n\/\/             if(counter == 0) {\r\n\/\/                 lever = true\r\n\/\/         }\r\n\/\/         }\r\n   \r\n        \r\n    \r\n\/\/ }, 20);\r\n        \r\n        \/\/ scene.getObjectByName('Top').material.emissive.setHex(0x39FF14)\r\n        \/\/ scene.getObjectByName('Top').material.emissiveIntensity = .1\r\n        \/\/scene.getObjectByName('Top').material.wireframe = true\r\n        scene.getObjectByName('Top').material.roughness = hov_on_roughness_val\r\n        scene.getObjectByName('Top').material.metalness = hov_on_metalness_val\r\n        \r\n    }\r\n    if (event.object.name == 'P2'){\r\n        scene.getObjectByName('Middle').material.roughness = hov_on_roughness_val\r\n        scene.getObjectByName('Middle').material.metalness = hov_on_metalness_val\r\n    }\r\n    if (event.object.name == 'P3'){\r\n        \r\n    }\r\n    if (event.object.name == 'P4'){\r\n        scene.getObjectByName('Knee').material.roughness = hov_on_roughness_val\r\n        scene.getObjectByName('Knee').material.metalness = hov_on_metalness_val\r\n    }\r\n    if (event.object.name == 'P5'){\r\n        \r\n    }\r\n    if (event.object.name == 'P6'){\r\n        \r\n    }\r\n    if (event.object.name == 'P7'){\r\n        \r\n    }\r\n    if (event.object.name == 'P8'){\r\n        \r\n    }\r\n    if (event.object.name == 'P9'){\r\n        \r\n    }\r\n    if (event.object.name == 'P10'){\r\n        \r\n    }\r\n\r\n} );\r\n\r\ncontrols1.addEventListener( 'hoveroff', function ( event ) {\r\n    \r\n    \/\/ scene.getObjectByName('Top').material.emissiveIntensity = 0\r\n    \/\/scene.getObjectByName('Top').material.wireframe = false\r\n    \/\/ scene.getObjectByName('Top').material.roughness = 1\r\n    \/\/ scene.getObjectByName('Top').material.metalness = 0\r\n    if (event.object.name == 'P1'){\r\n        scene.getObjectByName('Top').material.roughness = hov_off_roughness_val\r\n        scene.getObjectByName('Top').material.metalness = hov_offmetalness_val\r\n        console.log(camera.position)\r\n    }\r\n\r\n    if (event.object.name == 'P2'){\r\n        scene.getObjectByName('Middle').material.roughness = hov_off_roughness_val\r\n        scene.getObjectByName('Middle').material.metalness = hov_offmetalness_val\r\n    }\r\n    if (event.object.name == 'P3'){\r\n        \r\n    }\r\n    if (event.object.name == 'P4'){\r\n        scene.getObjectByName('Knee').material.roughness = hov_off_roughness_val\r\n        scene.getObjectByName('Knee').material.metalness = hov_offmetalness_val\r\n    }\r\n    if (event.object.name == 'P5'){\r\n        \r\n    }\r\n    if (event.object.name == 'P6'){\r\n        \r\n    }\r\n    if (event.object.name == 'P7'){\r\n        \r\n    }\r\n    if (event.object.name == 'P8'){\r\n        \r\n    }\r\n    if (event.object.name == 'P9'){\r\n        \r\n    }\r\n    if (event.object.name == 'P10'){\r\n        \r\n    }\r\n} );\r\n\r\ncontrols1.addEventListener( 'dragstart', function ( event ) {\r\n\r\n\t\/\/ event.object.material.emissive( 0xaaaaaa );\r\n    controls.enabled = false;\r\n     \r\n\r\n} );\r\n\r\ncontrols1.addEventListener( 'drag', function ( event ) {\r\n\r\n\t\/\/ event.object.material.emissive( 0x000000 );\r\n\r\n    let pieceBox = new THREE.Box3().setFromObject( event.object );\r\n    let pieceCenter = pieceBox.getCenter();\r\n    \/\/event.object.material.emissive \/\/= 0xffffff ;\r\n    \/\/renderer.render(scene, camera);\r\n    \/\/console.log(pieceCenter.x, pieceCenter.y)\r\n\r\n    if (event.object.name == 'P1'){\r\n        C1.Color_1 = Swatch_color_location(pieceCenter.x, pieceCenter.y, event.object.name)\r\n        \/\/scene.getObjectByName('Top').material.emissive.setHex(0xff00ff) ;\r\n    }\r\n    if (event.object.name == 'P2'){\r\n        C2.Color_2 = Swatch_color_location(pieceCenter.x, pieceCenter.y, event.object.name)\r\n    }\r\n    if (event.object.name == 'P3'){\r\n        C3.Color_3 = Swatch_color_location(pieceCenter.x, pieceCenter.y, event.object.name)\r\n    }\r\n    if (event.object.name == 'P4'){\r\n        C4.Color_4 = Swatch_color_location(pieceCenter.x, pieceCenter.y, event.object.name)\r\n    }\r\n    if (event.object.name == 'P5'){\r\n        C5.Color_5 = Swatch_color_location(pieceCenter.x, pieceCenter.y, event.object.name)\r\n    }\r\n    if (event.object.name == 'P6'){\r\n        C6.Color_6 = Swatch_color_location(pieceCenter.x, pieceCenter.y, event.object.name)\r\n    }\r\n    if (event.object.name == 'P7'){\r\n        C7.Color_7 = Swatch_color_location(pieceCenter.x, pieceCenter.y, event.object.name)\r\n    }\r\n    if (event.object.name == 'P8'){\r\n        C8.Color_8 = Swatch_color_location(pieceCenter.x, pieceCenter.y, event.object.name)\r\n    }\r\n    if (event.object.name == 'P9'){\r\n        C9.Color_9 = Swatch_color_location(pieceCenter.x, pieceCenter.y, event.object.name)\r\n    }\r\n    if (event.object.name == 'P10'){\r\n        C10.Color_10 = Swatch_color_location(pieceCenter.x, pieceCenter.y, event.object.name)\r\n    }\r\n    \r\n\/\/     if (event.object.name == 'P1'){\r\n     \r\n\/\/      console.log(event.object)\r\n\/\/      \/\/C1.Color_1 = Swatch_color_location(sw1center.x, sw1center.y)\r\n    \r\n\/\/  }\r\n\r\n    \/\/ Add if statement for every color swatch\r\n\r\n    \/\/controls.enabled = true;\r\n\r\n    \r\n\r\n} );\r\n\r\ncontrols1.addEventListener( 'dragend', function ( event ) {\r\n        \/\/scene.getObjectByName('Top').material.emissive.setHex(0x000000) \r\n\r\n\/\/ event.object.material.emissive( 0xaaaaaa );\r\ncontrols.enabled = true;\r\n \r\n\r\n} );  \r\n\r\n        const gui = new dat.GUI({width:300}); \r\n        document.getElementsByClassName('dg ac')[0].style.top = '19%';\r\n\t    \/\/document.getElementsByClassName('dg ac')[0].style.right = '50px';\r\n        \r\n               \r\n                const ViewPortFolder = gui.addFolder('View Port')\r\n                ViewPortFolder.open()\r\n                var materialParams = {\r\n                    backgroundColor: BACKGROUND_COLOUR_SCENE\r\n                }\r\n                const BackgroundColor = gui.addColor(materialParams, 'backgroundColor').onChange(function(value){ \r\n                    BACKGROUND_COLOUR_SCENE = value\r\n                    renderer.setClearColor(BACKGROUND_COLOUR_SCENE, BACKGROUND_COLOUR_TRANSPARENCE);\r\n                    }).name('Background-color')\r\n\r\n                const colorFolder = gui.addFolder('Frame Color')\r\n                colorFolder.open()\r\n                const frameBagColor = gui.addFolder('Frame Bag Color')\r\n                frameBagColor.open()\r\n                const colorDriveSide = frameBagColor.addFolder('Drive Side Color')\r\n                colorDriveSide.open()\r\n                const colorNonDriveSide = frameBagColor.addFolder('Non Drive Side Color')\r\n                colorNonDriveSide.open()\r\n                const colorZipper = frameBagColor.addFolder('Zipper Color')\r\n                colorZipper.open()\r\n        \r\n        var color = {r: 0, g: 0, b: 0};\r\n        \r\n        a= colorFolder.add(color,'r',0,255,1).name('R')\r\n        b= colorFolder.add(color,'g',0,255,1).name('G')\r\n        c= colorFolder.add(color,'b',0,255,1).name('B')\r\n\r\n        a.onChange(function(value){\r\n\/\/             const params = {\r\n\/\/   color: model.children[0].material.color.getHex(THREE.SRGBColorSpace),\r\n\/\/ };\r\n\r\n            base2 = new THREE.Color().setRGB(a.object.r\/255, b.object.g\/255, c.object.b\/255);\r\n            model.children[0].material.color= base2;    \r\n\r\n        });\r\n        \/\/     gui.addColor(params, 'color').onChange((value) => {\r\n        \/\/         model.children[0].material.color(value, THREE.SRGBColorSpace);\r\n        \/\/ });\r\n         \r\n        b.onChange(function(value){\r\n            \r\n            base2 = new THREE.Color().setRGB(a.object.r\/255, b.object.g\/255, c.object.b\/255);\r\n            model.children[0].material.color= base2;    \r\n        });\r\n\r\n        c.onChange(function(value){\r\n            base2 = new THREE.Color().setRGB(a.object.r\/255, b.object.g\/255, c.object.b\/255);\r\n            model.children[0].material.color= base2;    \r\n        });\r\n \r\n        colorFolder.open()\r\n        \r\n                var C1 = {Color_1 : 'undefined'};\r\n                const DS1 = colorDriveSide.add(C1,'Color_1').name('Color 1').listen();\r\n\r\n                var C2 = {Color_2 : 'undefined'};\r\n                const DS2 = colorDriveSide.add(C2,'Color_2').name('Color 2').listen();\r\n\r\n                var C3 = {Color_3 : 'undefined'};\r\n                const DS3 = colorDriveSide.add(C3,'Color_3').name('Color 3').listen();\r\n\r\n                var C4 = {Color_4 : 'undefined'};\r\n                const DS4 = colorDriveSide.add(C4,'Color_4').name('Color 4').listen();\r\n\r\n\r\n                var C5 = {Color_5 : 'undefined'};\r\n                const NDS1 = colorNonDriveSide.add(C5,'Color_5').name('Color 5').listen();\r\n\r\n                var C6 = {Color_6 : 'undefined'};\r\n                const NDS2 = colorNonDriveSide.add(C6,'Color_6').name('Color 6').listen();\r\n\r\n                var C7 = {Color_7 : 'undefined'};\r\n                const NDS3 = colorNonDriveSide.add(C7,'Color_7').name('Color 7').listen();\r\n\r\n\r\n                var C8 = {Color_8 : 'undefined'};\r\n                const DSzipper1 = colorZipper.add(C8,'Color_8').name('Color 8').listen();\r\n\r\n                var C9 = {Color_9 : 'undefined'};\r\n                const NDSzipper1 = colorZipper.add(C9,'Color_9').name('Color 9').listen();\r\n\r\n                var C10 = {Color_10 : 'undefined'};\r\n                const DSzipper2 = colorZipper.add(C10,'Color_10').name('Color 10').listen();\r\n\r\n        var Viewport = { \r\n            Front_View : function(){ camera.position.set(-43.803961179028384, 521.9726317334176, 1957.8070010684255) },\r\n            Rear_View : function(){ camera.position.set(-43.803961179028384, -521.9726317334176, -1957.8070010684255) }\r\n            \r\n            }\r\n\r\n        ViewPortFolder.add(Viewport, 'Front_View').name('Front View')\r\n        ViewPortFolder.add(Viewport, 'Rear_View').name('Rear View')\r\n        \r\n     \r\n        var export_color = {\r\n            export : function(){\r\n                \/\/window.open(\"https:\/\/www.meritgear.eu\/shop\/Custom-Frame-Bag-Double-Decker-p623619290\")\r\n\r\n                \/\/a = d.document.open()\r\n\r\n                \/\/ var link = document.querySelector('link[rel=\"import\"]');\r\n                \/\/link.import.querySelector(\"#ecwid-store-65172052 > div > div > div > div > div > div:nth-child(2) > div > div.ec-store.ec-store__product-page.ec-store__product-page--623619290.ec-store__product-page--c169843279 > div > div:nth-child(1) > div.product-details.product-details--layout-sidebar-right.product-details--description-basic > div.product-details__sidebar > div.product-details__product-options.details-product-options > div.product-details-module.details-product-option.details-product-option--How-did-you-find-us003f-If-I-may-ask-c003a.details-product-option--textarea > div.product-details-module__content > div\")\r\n                \r\n                \/\/ link.getElementById(\"formcontrol__text\").value = \"My value\";\r\n\r\n                \/\/document.querySelector(\"#ecwid-store-65172052 > div > div > div > div > div > div:nth-child(2) > div > div.ec-store.ec-store__product-page.ec-store__product-page--623619290.ec-store__product-page--c169843279 > div > div:nth-child(1) > div.product-details.product-details--layout-sidebar-right.product-details--description-basic > div.product-details__sidebar > div.product-details__product-options.details-product-options > div.product-details-module.details-product-option.details-product-option--Colour-10-0028zipper-drive-side0029.details-product-option--select > div.product-details-module__content > div > input\")\r\n                \/\/document.getElementById(document)\r\n                \/\/console.log(document)\r\n\r\n                \/\/d.querySelector(\"#ecwid-store-65172052 > div > div > div > div > div > div:nth-child(2) > div > div.ec-store.ec-store__product-page.ec-store__product-page--623619290.ec-store__product-page--c169843279 > div > div:nth-child(1) > div.product-details.product-details--layout-sidebar-right.product-details--description-basic > div.product-details__sidebar > div.product-details__product-options.details-product-options > div.product-details-module.details-product-option.details-product-option--How-did-you-find-us003f-If-I-may-ask-c003a.details-product-option--textarea > div.product-details-module__content > div > textarea\")\r\n\r\n                \/\/d.querySelector(\"#form-control__radio--1715802222\")\r\n                \/\/console.log(document.getElementById(\"form-control__radio-view-inner\"))\r\n                console.log(BACKGROUND_COLOUR_SCENE)\r\n                var products = [ \r\n                    \/\/['Description', 'Value'],\r\n\r\n                    [\"Background Color\", decimalToHexString(BACKGROUND_COLOUR_SCENE).toString()],\r\n                    [\"R\", color.r.toString()],\r\n                    [\"G\", color.g.toString()],\r\n                    [\"B\", color.b.toString()],\r\n                    [\"Color 1\", C1.Color_1.toString()],\r\n                    [\"Color 2\", C2.Color_2.toString()],\r\n                    [\"Color 3\", C3.Color_3.toString()],\r\n                    [\"Color 4\", C4.Color_4.toString()],\r\n                    [\"Color 5\", C5.Color_5.toString()],\r\n                    [\"Color 6\", C6.Color_6.toString()],\r\n                    [\"Color 7\", C7.Color_7.toString()],\r\n                    [\"Color 8\", C8.Color_8.toString()],\r\n                    [\"Color 9\", C9.Color_9.toString()],\r\n                    [\"Color 10\", C10.Color_10.toString()]\r\n    ]\r\n            \r\n                \r\n    \r\n        \r\n    \r\n    const productValuesArrays = products.map(product =>Object.values(product));\r\n    \/\/productValuesArrays.unshift(Object.keys(products));\r\n    const csvContent = \"data:text\/csv;charset=utf-8,\" \r\n    + productValuesArrays.map(row => row.join(\",\")).join(\"\\n\");\r\n\r\n    const encodedUri = encodeURI(csvContent);\r\n                \r\n\r\n                const link = document.createElement(\"a\");\r\n                link.setAttribute(\"href\", encodedUri);\r\n                link.setAttribute(\"download\", \"Merit Gear color configurator.csv\");\r\n                \/\/document.body.appendChild(link); \r\n\r\nlink.click(); \/\/ This will download the CSV file named \"products.csv\". \r\n              \r\n\r\n               \r\n            }\r\n        }\r\n        var go2shop = {\r\n                export: function(){\r\n                    window.open(\"https:\/\/www.meritgear.eu\/shop\/Custom-Frame-Bag-Double-Decker-p623619290\") \r\n                } }\r\n        gui.add(export_color, 'export').name('Export to CSV')\r\n        gui.add(go2shop, 'export').name('Order Frame Bag')\r\n        resizeCanvas();\r\n    }\r\n\r\n    function decimalToHexString(number) {\r\n\r\n        if (number < 0) {\r\n\r\n            number = 0xFFFFFFFF + number + 1;\r\n        }\r\n\r\n        return number.toString(16).toUpperCase();\r\n    }\r\n    function downloadCSV(filename, csvData){\r\n        const element = document.createElement('a')\r\n        element.setAttribute('href', 'data:text\/csv;charset=utf-8,${csvData}')\r\n        element.setAttribute('download', filename)\r\n        link.textContent = 'Click to Download'\r\n        document.querySelector('body').append(link)\r\n    }\r\n\r\n    function fitModelToCanvas() {\r\n        if (!model) return;\r\n\r\n        const box = new THREE.Box3().setFromObject(model);\r\n        const center = box.getCenter(new THREE.Vector3());\r\n\r\n        model.position.sub(center);\r\n\r\n        const isMobile = window.innerWidth <= 768;\r\n        let distance = isMobile ? CAMERA_DISTANCE_FACTOR_MOBILE : CAMERA_DISTANCE_FACTOR_DESKTOP;\r\n\r\n        camera.position.set(CAMERA_OFFSET_X, CAMERA_OFFSET_Y, distance);\r\n        camera.lookAt(new THREE.Vector3(0, 0, 0));\r\n        camera.updateProjectionMatrix();\r\n\r\n        renderer.setSize(canvas.clientWidth, canvas.clientHeight);\r\n    }\r\n    \r\n    function animate() {\r\n    \r\n    requestAnimationFrame(animate);\r\n    controls.update();\r\n\r\n    \/\/ camera.lookAt(scene.position );\r\n\r\n\t\/\/ \t\t\tcamera.updateMatrixWorld();\r\n\r\n    \r\n\r\n    \/\/ raycaster.setFromCamera( pointer, camera );\r\n\r\n\t\/\/ \t\t\tconst intersects = raycaster.intersectObjects( scene.children, false );\r\n\r\n\t\/\/ \t\t\tif ( intersects.length > 0 ) {\r\n\r\n\t\/\/ \t\t\t\tif ( INTERSECTED != intersects[ 0 ].object ) {\r\n\r\n\t\/\/ \t\t\t\t\tif ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );\r\n\r\n\t\/\/ \t\t\t\t\tINTERSECTED = intersects[ 0 ].object;\r\n\t\/\/ \t\t\t\t\tINTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();\r\n\t\/\/ \t\t\t\t\tINTERSECTED.material.emissive.setHex( 0xff0000 );\r\n\r\n\t\/\/ \t\t\t\t}\r\n\r\n\t\/\/ \t\t\t} else {\r\n\r\n\t\/\/ \t\t\t\tif ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );\r\n\r\n\t\/\/ \t\t\t\tINTERSECTED = null;\r\n\r\n\t\/\/ \t\t\t}\r\n\r\n    renderer.render(scene, camera);\r\n    }\r\n\r\n    function resizeCanvas() {\r\n\r\n        \/\/ camera.aspect = canvas.clientWidth \/ canvas.clientHeight;\r\n\t\t\/\/ camera.updateProjectionMatrix();\r\n\r\n\t\t\/\/ \trenderer.setSize( canvas.clientWidth, canvas.clientHeight );\r\n\r\n\t\t\/\/ \t}\r\n\r\n\r\n    \r\n        if (canvas && renderer && camera) {\r\n            camera.aspect = canvas.clientWidth \/ canvas.clientHeight;\r\n            camera.updateProjectionMatrix();\r\n            renderer.setSize(canvas.clientWidth, canvas.clientHeight);\r\n            \r\n            \r\n            if (model) {\r\n                \/\/fitModelToCanvas();\r\n            }\r\n        }\r\n    }\r\n    \r\n    \r\n    function updateLoadingScreen(progress) {\r\n        const progressText = document.getElementById('loading-progress');\r\n        if (progressText) {\r\n            progressText.textContent = 'Loading 3D Model: ${Math.round(progress * 100)}%'\r\n        }\r\n    }\r\n\r\n    function hideLoadingScreen() {\r\n        const loadingScreen = document.getElementById('loading-screen');\r\n        if (loadingScreen) {\r\n            loadingScreen.style.display = 'none';\r\n        }\r\n    }\r\n\r\n    \r\n    function startModelLoad() {\r\n        \r\n        const loadingManager = new THREE.LoadingManager();\r\n\r\n        loadingManager.onProgress = function (url, itemsLoaded, itemsTotal) {\r\n            updateLoadingScreen(itemsLoaded \/ itemsTotal);\r\n        };\r\n\r\n        loadingManager.onLoad = function () {\r\n            hideLoadingScreen();\r\n        };\r\n        const loader = new THREE.GLTFLoader(loadingManager);\r\n        loader.load(MODEL_URL,\r\n            function (gltf) {\r\n                model = gltf.scene;\r\n                \/\/ addOutlineObject(model)\r\n\r\n                model.position.y = 75\r\n                model.rotation.x = Math.PI\/2;\r\n                \/\/console.log(model)\r\n                \/\/model.children[0].material.color.setHex( 0x484c4b );\r\n                let bbox = new THREE.Box3().setFromObject( model );\r\n                let bcenter = bbox.getCenter();\r\n                \r\n\/\/                 composer = new THREE.EffectComposer( renderer );\r\n\r\n\/\/ const renderPass = new THREE.RenderPass( scene, camera );\r\n\/\/ composer.addPass( renderPass );\r\n\r\n\/\/ outlinePass = new THREE.OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), scene, camera );\r\n\/\/ composer.addPass( outlinePass );\r\n                scene.add(model);\r\n\r\n                animate()\r\n            \r\n            },\r\n            function (xhr) {\r\n                \/\/ Progress callback\r\n            },\r\n            function (error) {\r\n                \/\/ Error callback\r\n            }\r\n            );\r\n        \/\/    let objectsToOutline=[]\r\n        \/\/     function addOutlineObject(object){\r\n        \/\/         objectsToOutline.push(object);\r\n        \/\/         outlinePass.selectedObjects = objectsToOutline\r\n        \/\/     }\r\n\r\n        \/\/     function addSelectedObject(object){\r\n        \/\/         selectedObjects = [];\r\n        \/\/         selectedObjects.push(object)\r\n        \/\/     }\r\n        \/\/     function checkIntersection(){\r\n        \/\/         raycaster.setFromCamera(mouse, camera);\r\n        \/\/         const intersects = raycaster.intersectedObject(scene, true)\r\n        \/\/         if (intersects.length >0){\r\n        \/\/             const selectedObjects = intersects[0].object\r\n        \/\/             addSelectedObject(selectedObject);\r\n        \/\/             outlinePass.selectedObjects = selectedObjects\r\n        \/\/         }\r\n        \/\/     }\r\n\r\n            const loader2 = new THREE.GLTFLoader(loadingManager);\r\n            loader2.encoding = THREE.sRGBEncoding\r\n        loader2.load(MODEL_URL2,\r\n            function (gltf) {\r\n                model2 = gltf.scene;\r\n                model2.position.y = 75\r\n                model2.rotation.x = Math.PI\/2;\r\n                \r\n                \/\/console.log(model2)\r\n                \/\/model2.children[0].material.color.setHex(red) \/\/\t161\t26\t27 125,20,21\r\n                \/\/model2.children[0].material.color.setHex( 0x484c4b );\r\n                \r\n                \/\/ var target = model2.children[1].material.color.setHex(0x0000FF)\r\n                \/\/ console.log(target)\r\n\r\n                \/\/ GLTF objects mogen GEEN materiaal attributt hebben\r\n                for (let i = 0; i < model2.children.length; i++) {\r\n                    \/\/ console.log(model2.children[i].name) \r\n                    var new_body = model2.children[i].clone()\r\n                    if (new_body instanceof THREE.Mesh) { \r\n                    new_body.material = new_body.material.clone() \r\n                    \r\n                }\r\n                \/\/new_body.material.color.setHex( Math.random() * 0xffffff )\r\n                model2.children[i].getWorldPosition(new_body.position)\r\n                model2.children[i].getWorldQuaternion(new_body.quaternion)\r\n                \r\n                scene.add(new_body)\r\n                }\r\n\r\n                \r\n                \r\n                \/\/let gui = new dat.GUI(); \r\n                \/\/ const cameraFolder = gui.addFolder('Camera')\r\n                \/\/ cameraFolder.add(camera.position, 'x', 0, 1000)\r\n                \/\/ cameraFolder.add(camera.position, 'y', 0, 1000)\r\n                \/\/ cameraFolder.add(camera.position, 'z', 0, 1000)\r\n                \/\/cameraFolder.open()\r\n                \r\n\r\n                \r\n            \r\n            },\r\n            function (xhr) {\r\n                \/\/ Progress callback\r\n            },\r\n            function (error) {\r\n                \/\/ Error callback\r\n            }\r\n            );\r\n           \r\n\r\n            const loader3 = new THREE.GLTFLoader(loadingManager);\r\n        loader3.load(MODEL_URL3,\r\n            function (gltf) {\r\n                model3 = gltf.scene;\r\n                model3.position.y = 75\r\n                model3.rotation.x = Math.PI\/2;\r\n                model3.children[0].material.color.setHex( Math.random() * 0xffffff );\r\n                \/\/console.log(model3)\r\n                scene.add(model3);\r\n                \r\n            \r\n            },\r\n            function (xhr) {\r\n                \/\/ Progress callback\r\n            },\r\n            function (error) {\r\n                \/\/ Error callback\r\n            }\r\n            );\r\n\r\n            const loader4 = new THREE.GLTFLoader(loadingManager);\r\n            loader4.load(MODEL_URL4,\r\n                function (gltf) {\r\n                    \/\/let objects = []\r\n                    model4 = gltf.scene;\r\n\r\n                    model4.children[0].position.y = 75;\r\n                    model4.children[0].rotation.x = Math.PI\/2;\r\n\r\n                    model4.children[1].position.y = 75;\r\n                    model4.children[1].rotation.x = Math.PI\/2;\r\n\r\n                    model4.children[2].position.y = 75;\r\n                    model4.children[2].rotation.x = Math.PI\/2;\r\n\r\n                    model4.children[3].position.y = 75;\r\n                    model4.children[3].rotation.x = Math.PI\/2;\r\n                    \r\n                    model4.children[4].position.y = 75;\r\n                    model4.children[4].rotation.x = Math.PI\/2;\r\n\r\n                    model4.children[5].position.y = 75;\r\n                    model4.children[5].rotation.x = Math.PI\/2;\r\n\r\n                    model4.children[6].position.y = 75;\r\n                    model4.children[6].rotation.x = Math.PI\/2;\r\n\r\n                    model4.children[7].position.y = 75;\r\n                    model4.children[7].rotation.x = Math.PI\/2;\r\n                    \r\n                    model4.children[8].position.y = 75;\r\n                    model4.children[8].rotation.x = Math.PI\/2;\r\n\r\n                    model4.children[9].position.y = 75;\r\n                    model4.children[9].rotation.x = Math.PI\/2;\r\n                    \/\/model4.children[3].material.color.setHex( Math.random() * 0xffffff );\r\n\r\n                    model4.children[0].name = 'P1'\r\n                    model4.children[1].name = 'P2'\r\n                    model4.children[2].name = 'P3'\r\n                    model4.children[3].name = 'P4'\r\n                    model4.children[4].name = 'P5'\r\n                    model4.children[5].name = 'P6'\r\n                    model4.children[6].name = 'P7'\r\n                    model4.children[7].name = 'P8'\r\n                    model4.children[8].name = 'P9'\r\n                    model4.children[9].name = 'P10'\r\n                    \r\n                \r\n                \r\n\r\nmodel4.children[0].userData.limit = {\r\nmin: new THREE.Vector3(-506.5, -525, 31.5),\r\nmax: new THREE.Vector3(713.6, 257.6, 31.5)\r\n};\r\n\r\nmodel4.children[1].userData.limit = {\r\nmin: new THREE.Vector3(-521, -420, 31.5),\r\nmax: new THREE.Vector3(699, 363.2, 31.5)\r\n};\r\n\r\nmodel4.children[2].userData.limit = {\r\nmin: new THREE.Vector3(-396.5, -237, 31.5),\r\nmax: new THREE.Vector3(823.5, 546, 31.5)\r\n};\r\n\r\nmodel4.children[3].userData.limit = {\r\nmin: new THREE.Vector3(-270.35, -126, 31.5),\r\nmax: new THREE.Vector3(950, 657, 31.5)\r\n};\r\n\r\nmodel4.children[4].userData.limit = {\r\nmin: new THREE.Vector3(-486, -517, -31.5),\r\nmax: new THREE.Vector3(734.3, 266, -31.5) \/\/ \r\n};\r\n\r\nmodel4.children[5].userData.limit = {\r\nmin: new THREE.Vector3(-395.9, -374, -31.5),\r\nmax: new THREE.Vector3(825.92, 409, -31.5) \/\/ \r\n};\r\n\r\nmodel4.children[6].userData.limit = {\r\nmin: new THREE.Vector3(-251, -124, -31.5),\r\nmax: new THREE.Vector3(969.2, 659, -31.5) \/\/ \r\n};\r\nmodel4.children[7].userData.limit = {\r\nmin: new THREE.Vector3(-626, -521, 31.5),\r\nmax: new THREE.Vector3(594.25, 261.2, 31.5)\r\n};\r\nmodel4.children[8].userData.limit = {\r\nmin: new THREE.Vector3(-604, -517.5, -31.5),\r\nmax: new THREE.Vector3(616.4, 265.5, -31.5) \/\/ \r\n};\r\nmodel4.children[9].userData.limit = {\r\nmin: new THREE.Vector3(-502, -304, 31.5),\r\nmax: new THREE.Vector3(719, 479.8, 31.5)\r\n};\r\n\r\nconst P1 = model4.children[0]\r\nconst P2 = model4.children[1]\r\nconst P3 = model4.children[2]\r\nconst P4 = model4.children[3]\r\nconst P5 = model4.children[4]\r\nconst P6 = model4.children[5]\r\nconst P7 = model4.children[6]\r\nconst P8 = model4.children[7]\r\nconst P9 = model4.children[8]\r\nconst P10 = model4.children[9]\r\n\r\nP1.userData.update = function(){\r\n    P1.position.clamp( P1.userData.limit.min,  P1.userData.limit.max);    \r\n}\r\nP2.userData.update = function(){\r\n    P2.position.clamp( P2.userData.limit.min,  P2.userData.limit.max);    \r\n}\r\nP3.userData.update = function(){\r\n    P3.position.clamp( P3.userData.limit.min,  P3.userData.limit.max);    \r\n}\r\nP4.userData.update = function(){\r\n    P4.position.clamp( P4.userData.limit.min,  P4.userData.limit.max);    \r\n}\r\nP5.userData.update = function(){\r\n    P5.position.clamp( P5.userData.limit.min,  P5.userData.limit.max);    \r\n}\r\nP6.userData.update = function(){\r\n    P6.position.clamp( P6.userData.limit.min,  P6.userData.limit.max);    \r\n}\r\nP7.userData.update = function(){\r\n    P7.position.clamp( P7.userData.limit.min,  P7.userData.limit.max);    \r\n}\r\nP8.userData.update = function(){\r\n    P8.position.clamp( P8.userData.limit.min,  P8.userData.limit.max);    \r\n}\r\nP9.userData.update = function(){\r\n    P9.position.clamp( P9.userData.limit.min,  P9.userData.limit.max);    \r\n}\r\nP10.userData.update = function(){\r\n    P10.position.clamp( P10.userData.limit.min,  P10.userData.limit.max);    \r\n}\r\n\r\nobjects.push(P1,P2,P3,P4,P5,P6,P7,P8,P9,P10);\r\nscene.add(P1,P2,P3,P4,P5,P6,P7,P8,P9,P10);\r\n\r\nrenderer.setAnimationLoop(()=>{\r\n\tobjects.forEach(o => {\r\n  \to.userData.update();\r\n  })\r\n  \r\n\trenderer.render(scene, camera);\r\n})\r\n                },\r\n                function (xhr) {\r\n                \/\/ Progress callback\r\n            },\r\n            function (error) {\r\n                \/\/ Error callback\r\n            }\r\n            )\r\n               \r\n    }\r\n    function onPointerMove( event ) {\r\n\r\npointer.x = ( event.clientX \/ window.innerWidth ) * 2 - 1;\r\npointer.y = - ( event.clientY \/ window.innerHeight ) * 2 + 1;\r\n\r\n}\r\n\r\nfunction Swatch_color_location (x,y,swatch){\r\n\r\n    let color_select\r\n\r\n    \/\/ Swatches : Bracket[0]\r\n    if (x > 140  && x < 260 && y > 25 && y < 145) {\r\n        if (swatch == 'P1'){\r\n            \r\n            scene.getObjectByName('Top').material.color.setHex( black )\r\n            \/\/console.log(\"p1\")\r\n            \r\n        }\r\n\r\n        if (swatch == 'P2'){\r\n            scene.getObjectByName('Middle').material.color.setHex( black )\r\n            console.log(\"p2\")\r\n        }\r\n\r\n        if (swatch == 'P4'){\r\n            scene.getObjectByName('Knee').material.color.setHex( black )\r\n            console.log(\"p4\")\r\n        }\r\n        model3.children[0].material.color.setHex( black );\r\n        \r\n        color_select = 'X-pac Black'\r\n        } \r\n\r\n    if (x > 280  && x < 400 && y > 25 && y < 145) {\r\n        if (swatch == 'P1'){\r\n            \r\n            scene.getObjectByName('Top').material.color.setHex( blue )\r\n            console.log(\"p1\")\r\n        }\r\n\r\n        if (swatch == 'P2'){\r\n            scene.getObjectByName('Middle').material.color.setHex( blue )\r\n            console.log(\"p2\")\r\n        }\r\n\r\n        if (swatch == 'P4'){\r\n            scene.getObjectByName('Knee').material.color.setHex( blue )\r\n            console.log(\"p4\")\r\n        \r\n        }\r\n        model3.children[0].material.color.setHex( blue );\r\n        color_select = 'X-pac Blue'\r\n        } \/\/ X-pac Blue\r\n    if (x > 420  && x < 540 && y > 25 && y < 145) {\r\n        if (swatch == 'P1'){\r\n            \r\n            scene.getObjectByName('Top').material.color.setHex( brown )\r\n            console.log(\"p1\")\r\n        }\r\n\r\n        if (swatch == 'P2'){\r\n            scene.getObjectByName('Middle').material.color.setHex( brown )\r\n            console.log(\"p2\")\r\n        }\r\n\r\n        if (swatch == 'P4'){\r\n            scene.getObjectByName('Knee').material.color.setHex( brown )\r\n            console.log(\"p4\")\r\n        \r\n        }\r\n        model3.children[0].material.color.setHex( brown);\r\n        color_select = 'X-pac Brown'\r\n        } \/\/ X-pac Brown\r\n    if (x > 560  && x < 680  && y > 25 && y < 145) {\r\n        if (swatch == 'P1'){\r\n            \r\n            scene.getObjectByName('Top').material.color.setHex( dark_blue )\r\n            console.log(\"p1\")\r\n        }\r\n\r\n        if (swatch == 'P2'){\r\n            scene.getObjectByName('Middle').material.color.setHex( dark_blue )\r\n            console.log(\"p2\")\r\n        }\r\n\r\n        if (swatch == 'P4'){\r\n            scene.getObjectByName('Knee').material.color.setHex( dark_blue)\r\n            console.log(\"p4\")\r\n        \r\n        }\r\n        model3.children[0].material.color.setHex( dark_blue );\r\n        color_select = 'X-pac Dark Blue'\r\n        } \r\n    if (x > 700  && x < 820  && y > 25 && y < 145) {\r\n        if (swatch == 'P1'){\r\n            \r\n            scene.getObjectByName('Top').material.color.setHex( grey )\r\n            console.log(\"p1\")\r\n        }\r\n\r\n        if (swatch == 'P2'){\r\n            scene.getObjectByName('Middle').material.color.setHex( grey )\r\n            console.log(\"p2\")\r\n        }\r\n\r\n        if (swatch == 'P4'){\r\n            scene.getObjectByName('Knee').material.color.setHex( grey )\r\n            console.log(\"p4\")\r\n        \r\n        }\r\n        model3.children[0].material.color.setHex( grey );\r\n        color_select = 'X-pac Grey'\r\n        } \r\n    if (x > 840  && x < 960  && y > 25 && y < 145) {\r\n        if (swatch == 'P1'){\r\n            \r\n            scene.getObjectByName('Top').material.color.setHex( hot_orange )\r\n            console.log(\"p1\")\r\n        }\r\n\r\n        if (swatch == 'P2'){\r\n            scene.getObjectByName('Middle').material.color.setHex( hot_orange )\r\n            console.log(\"p2\")\r\n        }\r\n\r\n        if (swatch == 'P4'){\r\n            scene.getObjectByName('Knee').material.color.setHex( hot_orange )\r\n            console.log(\"p4\")\r\n        model3.children[0].material.color.setHex( hot_orange );\r\n        }\r\n        model3.children[0].material.color.setHex( hot_orange );\r\n        color_select = 'X-pac Hot Orange'\r\n        } \r\n\r\n    \/\/ Swatches : Bracket[1]\r\n    if (x > 280  && x < 400 && y > 165 && y < 285) {\r\n        model3.children[0].material.color.setHex( Math.random() * 0xffffff );\r\n        \r\n        color_select = 'Liteskin'\r\n        } \r\n    if (x > 420  && x < 540 && y > 165 && y < 285) {\r\n        if (swatch == 'P1'){\r\n            \r\n            scene.getObjectByName('Top').material.color.setHex( olive_green )\r\n            console.log(\"p1\")\r\n        }\r\n\r\n        if (swatch == 'P2'){\r\n            scene.getObjectByName('Middle').material.color.setHex( olive_green )\r\n            console.log(\"p2\")\r\n        }\r\n\r\n        if (swatch == 'P4'){\r\n            scene.getObjectByName('Knee').material.color.setHex( olive_green )\r\n            console.log(\"p4\")\r\n        \r\n        }\r\n        model3.children[0].material.color.setHex( olive_green );\r\n        color_select = 'X-pac Olive Green'\r\n        } \r\n    if (x > 560  && x < 680  && y > 165 && y < 285) {\r\n        if (swatch == 'P1'){\r\n            \r\n            scene.getObjectByName('Top').material.color.setHex( purple )\r\n            console.log(\"p1\")\r\n        }\r\n\r\n        if (swatch == 'P2'){\r\n            scene.getObjectByName('Middle').material.color.setHex( purple )\r\n            console.log(\"p2\")\r\n        }\r\n\r\n        if (swatch == 'P4'){\r\n            scene.getObjectByName('Knee').material.color.setHex( purple )\r\n            console.log(\"p4\")\r\n\r\n    \r\n        }\r\n        model3.children[0].material.color.setHex( purple );\r\n        color_select = 'X-pac Purple'\r\n        } \r\n\r\n    if (x > 700  && x < 820  && y > 165 && y < 285) {\r\n        if (swatch == 'P1'){\r\n            \r\n            scene.getObjectByName('Top').material.color.setHex( red )\r\n            console.log(scene.getObjectByName('Top').material.color)\r\n            console.log(scene.getObjectByName('Color_Swatches').material.color)\r\n            console.log(\"p1\")\r\n        }\r\n\r\n        if (swatch == 'P2'){\r\n            scene.getObjectByName('Middle').material.color.setHex( red )\r\n            console.log(\"p2\")\r\n        }\r\n\r\n        if (swatch == 'P4'){\r\n            scene.getObjectByName('Knee').material.color.setHex( red )\r\n            console.log(\"p4\")\r\n        \r\n        }\r\n        model3.children[0].material.metalness =  0.0\r\n        model3.children[0].material.color.setHex( red );\r\n        color_select = 'X-pac Red'\r\n        }\r\n\r\n    if (x > 840  && x < 960  && y > 165 && y < 285) {\r\n        if (swatch == 'P1'){\r\n            \r\n            scene.getObjectByName('Top').material.color.setHex( turquoise )\r\n            console.log(\"p1\")\r\n        }\r\n\r\n        if (swatch == 'P2'){\r\n            scene.getObjectByName('Middle').material.color.setHex( turquoise )\r\n            console.log(\"p2\")\r\n        }\r\n\r\n        if (swatch == 'P4'){\r\n            scene.getObjectByName('Knee').material.color.setHex( turquoise )\r\n            console.log(\"p4\")\r\n        \r\n        }\r\n        model3.children[0].material.color.setHex( turquoise );\r\n        color_select = 'X-pac Turquoise'\r\n        }\r\n    \/\/ Swatches : Bracket[1]\r\n    if (x > 420  && x < 540 && y > 305 && y < 425) {\r\n        if (swatch == 'P1'){\r\n            \r\n            scene.getObjectByName('Top').material.color.setHex( white )\r\n            console.log(\"p1\")\r\n        }\r\n\r\n        if (swatch == 'P2'){\r\n            scene.getObjectByName('Middle').material.color.setHex( white )\r\n            console.log(\"p2\")\r\n        }\r\n\r\n        if (swatch == 'P4'){\r\n            scene.getObjectByName('Knee').material.color.setHex( white )\r\n            console.log(\"p4\")\r\n        \r\n        }\r\n        model3.children[0].material.color.setHex( white );\r\n        color_select = 'X-pac White'\r\n        } \r\n    if (x > 560  && x < 680  && y > 305 && y < 425) {\r\n        if (swatch == 'P1'){\r\n            \r\n            scene.getObjectByName('Top').material.color.setHex( yellow )\r\n            console.log(\"p1\")\r\n        }\r\n\r\n        if (swatch == 'P2'){\r\n            scene.getObjectByName('Middle').material.color.setHex( yellow )\r\n            console.log(\"p2\")\r\n        }\r\n\r\n        if (swatch == 'P4'){\r\n            scene.getObjectByName('Knee').material.color.setHex( yellow )\r\n            console.log(\"p4\")\r\n        \r\n        }\r\n        model3.children[0].material.color.setHex( yellow );\r\n        color_select = 'X-pac Yellow'\r\n        } \r\n    if (x > 700  && x < 820  && y > 305 && y < 425) {\r\n        model3.children[0].material.color.setHex( Math.random() * 0xffffff );\r\n        \r\n        color_select = 'Top Secret'\r\n        } \r\n    if (x > 840  && x < 960  && y > 305 && y < 425) {\r\n        model3.children[0].material.color.setHex( Math.random() * 0xffffff );\r\n        \r\n        color_select = 'Really Top Secret'\r\n        }\r\n\r\n    return color_select\r\n}\r\n\r\n    function initiateBackgroundLoading() {\r\n        setupScene();\r\n        startModelLoad();\r\n    }\r\n\r\n    initiateBackgroundLoading();\r\n    window.addEventListener('resize', resizeCanvas);\r\n    \r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Loading 3D Model: 0%<\/p>","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"two_page_speed":[],"footnotes":""},"class_list":["post-3786","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.meritgear.eu\/nl\/wp-json\/wp\/v2\/pages\/3786","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.meritgear.eu\/nl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.meritgear.eu\/nl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.meritgear.eu\/nl\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.meritgear.eu\/nl\/wp-json\/wp\/v2\/comments?post=3786"}],"version-history":[{"count":0,"href":"https:\/\/www.meritgear.eu\/nl\/wp-json\/wp\/v2\/pages\/3786\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.meritgear.eu\/nl\/wp-json\/wp\/v2\/media?parent=3786"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}