{"version":3,"sources":["components/View3D/View3D.js","App.js","serviceWorker.js","index.js"],"names":["View3D","props","start","frameId","requestAnimationFrame","animate","stop","cancelAnimationFrame","machine","rotation","z","renderScene","renderer","render","scene","camera","handleFovChange","bind","width","this","mount","clientWidth","height","clientHeight","THREE","loader","ColladaLoader","loadAsync","event","console","log","loaded","lengthComputable","total","asset","traverse","child","isMesh","material","color","flatShading","scale","x","y","updateMatrix","position","Math","cos","PI","sin","lookAt","add","light","antialias","setClearColor","setSize","appendChild","domElement","removeChild","className","style","ref","type","min","max","onChange","fov","target","value","updateProjectionMatrix","Component","App","Boolean","window","location","hostname","match","ReactDOM","StrictMode","document","getElementById","navigator","serviceWorker","ready","then","registration","unregister","catch","error","message"],"mappings":"gVAKaA,EAAb,kDAEI,WAAYC,GAAQ,IAAD,8BACf,cAAMA,IAoEVC,MAAQ,WACC,EAAKC,UACN,EAAKA,QAAUC,sBAAsB,EAAKC,WAvE/B,EA2EnBC,KAAO,WACHC,qBAAqB,EAAKJ,UA5EX,EA+EnBE,QAAU,WACN,EAAKG,QAAQC,SAASC,GAAK,IAE3B,EAAKC,cACL,EAAKR,QAAUC,sBAAsB,EAAKC,UAnF3B,EAsFnBM,YAAc,WACV,EAAKC,SAASC,OAAO,EAAKC,MAAO,EAAKC,SApFtC,EAAKC,gBAAkB,EAAKA,gBAAgBC,KAArB,gBAHR,EAFvB,+LAScC,EAAQC,KAAKC,MAAMC,YACnBC,EAASH,KAAKC,MAAMG,aAG1BJ,KAAKL,MAAQ,IAAIU,IAGXC,EAAS,IAAIC,IAhB3B,SAiB4BD,EAAOE,UAAU,+BAA+B,SAAAC,GAChEC,QAAQC,IAAR,UAAeF,EAAMG,QAArB,OAA+BH,EAAMI,iBAAmB,MAAOJ,EAAMK,MAAO,QAlBxF,OAiBcC,EAjBd,OAqBQf,KAAKX,QAAU0B,EAAMpB,MAGrBK,KAAKX,QAAQ2B,UAAS,SAAAC,GACfA,EAAMC,SAELD,EAAME,SAASC,MAAQ,IAAIf,IAAY,SACvCY,EAAME,SAASE,aAAc,MAKrCrB,KAAKX,QAAQiC,MAAMC,EAAIvB,KAAKX,QAAQiC,MAAME,EAAIxB,KAAKX,QAAQiC,MAAM/B,EAAI,GACrES,KAAKX,QAAQoC,eAGbzB,KAAKJ,OAAS,IAAIS,IACd,GACAN,EAAQI,EACR,GACA,KAGU,GACdH,KAAKJ,OAAO8B,SAASH,EAAsC,GAAlCI,KAAKC,IADhB,GAC4BD,KAAKE,GAAK,KACpD7B,KAAKJ,OAAO8B,SAASF,EAAI,GACzBxB,KAAKJ,OAAO8B,SAASnC,EAAsC,GAAlCoC,KAAKG,IAHhB,GAG4BH,KAAKE,GAAK,KACpD7B,KAAKJ,OAAOmC,OAAO,EAAG,EAAG,GAEzB/B,KAAKL,MAAMqC,IAAIhC,KAAKX,SAGd4C,EAAQ,IAAI5B,IAAsB,SAAU,SAClDL,KAAKL,MAAMqC,IAAIC,GAGfjC,KAAKP,SAAW,IAAIY,IAAqB,CAAE6B,WAAW,IACtDlC,KAAKP,SAAS0C,cAAc,WAC5BnC,KAAKP,SAAS2C,QAAQrC,EAAOI,GAC7BH,KAAKC,MAAMoC,YAAYrC,KAAKP,SAAS6C,YAGrCtC,KAAKjB,QA/Db,oJAmEQiB,KAAKb,OACLa,KAAKC,MAAMsC,YAAYvC,KAAKP,SAAS6C,cApE7C,+BA4Fc,IAAD,OACL,OACI,yBAAKE,UAAU,SACXC,MAAO,CAAE1C,MAAO,QAASI,OAAQ,SACjCuC,IAAM,SAAAzC,GAAK,OAAI,EAAKA,MAAQA,IAE5B,+CACI,2BAAO0C,KAAK,QAAQC,IAAI,KAAKC,IAAI,KAAKC,SAAU9C,KAAKH,sBAnGzE,sCAyGoBY,GACZT,KAAKJ,OAAOmD,IAAM,IAAMtC,EAAMuC,OAAOC,MACrCjD,KAAKJ,OAAOsD,6BA3GpB,GAA4BC,aCcbC,MAff,WACE,OACE,yBAAKZ,UAAU,OACb,4BAAQA,UAAU,cAChB,qDAIF,8BACE,kBAAC,EAAD,SCDYa,QACW,cAA7BC,OAAOC,SAASC,UAEe,UAA7BF,OAAOC,SAASC,UAEhBF,OAAOC,SAASC,SAASC,MACvB,2DCZNC,IAAShE,OACP,kBAAC,IAAMiE,WAAP,KACE,kBAAC,EAAD,OAEFC,SAASC,eAAe,SDyHpB,kBAAmBC,WACrBA,UAAUC,cAAcC,MACrBC,MAAK,SAAAC,GACJA,EAAaC,gBAEdC,OAAM,SAAAC,GACL3D,QAAQ2D,MAAMA,EAAMC,c","file":"static/js/main.a5750a2b.chunk.js","sourcesContent":["import React, { Component } from 'react';\nimport './View3D.css';\nimport * as THREE from 'three';\nimport { ColladaLoader } from \"three/examples/jsm/loaders/ColladaLoader\";\n\nexport class View3D extends Component {\n\n    constructor(props) {\n        super(props);\n\n        this.handleFovChange = this.handleFovChange.bind(this);\n    }\n\n    async componentDidMount() {\n        const width = this.mount.clientWidth;\n        const height = this.mount.clientHeight;\n\n        // scene\n        this.scene = new THREE.Scene();\n\n        // load model\n        const loader = new ColladaLoader();\n        const asset = await loader.loadAsync('collada/abb_irb52_7_120.dae', event => {\n            console.log(`${event.loaded}${ event.lengthComputable ? ' / '+ event.total: ''}`)\n        });\n\n        this.machine = asset.scene;\n\n        // color each component\n        this.machine.traverse(child => {\n            if(child.isMesh) {\n                // model does not have normals\n                child.material.color = new THREE.Color('white');\n                child.material.flatShading = true;\n            }\n        });\n\n        // set scale\n        this.machine.scale.x = this.machine.scale.y = this.machine.scale.z = 10.0;\n        this.machine.updateMatrix();\n\n        // camera\n        this.camera = new THREE.PerspectiveCamera(\n            75,                     // field of view\n            width / height,         // aspect ratio\n            .1,                     // near plane\n            1000                    // far plane\n        );\n\n        const angle = 90;\n        this.camera.position.x = Math.cos(angle * Math.PI / 180) * 15;\n        this.camera.position.y = 15;\n        this.camera.position.z = Math.sin(angle * Math.PI / 180) * 15;\n        this.camera.lookAt(0, 5, 0);\n\n        this.scene.add(this.machine);\n\n        // lights\n        const light = new THREE.HemisphereLight(0xffffff, 0x888888)\n        this.scene.add(light)\n\n        // renderer\n        this.renderer = new THREE.WebGL1Renderer({ antialias: true });\n        this.renderer.setClearColor('#000000');\n        this.renderer.setSize(width, height);\n        this.mount.appendChild(this.renderer.domElement);\n\n        // action!\n        this.start();\n    }\n\n    componentWillUnmount() {\n        this.stop()\n        this.mount.removeChild(this.renderer.domElement);\n    }\n\n    start = () => {\n        if (!this.frameId) {\n            this.frameId = requestAnimationFrame(this.animate);\n        }\n    }\n\n    stop = () => {\n        cancelAnimationFrame(this.frameId)\n    }\n\n    animate = () => {\n        this.machine.rotation.z += .01;\n\n        this.renderScene();\n        this.frameId = requestAnimationFrame(this.animate);\n    }\n\n    renderScene = () => {\n        this.renderer.render(this.scene, this.camera);\n    }\n\n    render() {\n        return (\n            <div className=\"View3D\"\n                style={{ width: '400px', height: '400px' }}\n                ref={ mount => this.mount = mount }\n            >\n                <label>Field of View\n                    <input type=\"range\" min=\"25\" max=\"75\" onChange={this.handleFovChange}/>\n                </label>\n            </div>\n        )\n    }\n\n    handleFovChange(event) {\n        this.camera.fov = 100 - event.target.value;\n        this.camera.updateProjectionMatrix();\n    }\n}\n","import React from 'react';\nimport './App.css';\nimport { View3D } from './components/View3D/View3D';\n\nfunction App() {\n  return (\n    <div className=\"App\">\n      <header className=\"App-header\">\n        <p>\n          React / three.js demo\n        </p>\n      </header>\n      <main>\n        <View3D/>\n      </main>\n    </div>\n  );\n}\n\nexport default App;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n  window.location.hostname === 'localhost' ||\n    // [::1] is the IPv6 localhost address.\n    window.location.hostname === '[::1]' ||\n    // 127.0.0.0/8 are considered localhost for IPv4.\n    window.location.hostname.match(\n      /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n    )\n);\n\nexport function register(config) {\n  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n    // The URL constructor is available in all browsers that support SW.\n    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n    if (publicUrl.origin !== window.location.origin) {\n      // Our service worker won't work if PUBLIC_URL is on a different origin\n      // from what our page is served on. This might happen if a CDN is used to\n      // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n      return;\n    }\n\n    window.addEventListener('load', () => {\n      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n      if (isLocalhost) {\n        // This is running on localhost. Let's check if a service worker still exists or not.\n        checkValidServiceWorker(swUrl, config);\n\n        // Add some additional logging to localhost, pointing developers to the\n        // service worker/PWA documentation.\n        navigator.serviceWorker.ready.then(() => {\n          console.log(\n            'This web app is being served cache-first by a service ' +\n              'worker. To learn more, visit https://bit.ly/CRA-PWA'\n          );\n        });\n      } else {\n        // Is not localhost. Just register service worker\n        registerValidSW(swUrl, config);\n      }\n    });\n  }\n}\n\nfunction registerValidSW(swUrl, config) {\n  navigator.serviceWorker\n    .register(swUrl)\n    .then(registration => {\n      registration.onupdatefound = () => {\n        const installingWorker = registration.installing;\n        if (installingWorker == null) {\n          return;\n        }\n        installingWorker.onstatechange = () => {\n          if (installingWorker.state === 'installed') {\n            if (navigator.serviceWorker.controller) {\n              // At this point, the updated precached content has been fetched,\n              // but the previous service worker will still serve the older\n              // content until all client tabs are closed.\n              console.log(\n                'New content is available and will be used when all ' +\n                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n              );\n\n              // Execute callback\n              if (config && config.onUpdate) {\n                config.onUpdate(registration);\n              }\n            } else {\n              // At this point, everything has been precached.\n              // It's the perfect time to display a\n              // \"Content is cached for offline use.\" message.\n              console.log('Content is cached for offline use.');\n\n              // Execute callback\n              if (config && config.onSuccess) {\n                config.onSuccess(registration);\n              }\n            }\n          }\n        };\n      };\n    })\n    .catch(error => {\n      console.error('Error during service worker registration:', error);\n    });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n  // Check if the service worker can be found. If it can't reload the page.\n  fetch(swUrl, {\n    headers: { 'Service-Worker': 'script' },\n  })\n    .then(response => {\n      // Ensure service worker exists, and that we really are getting a JS file.\n      const contentType = response.headers.get('content-type');\n      if (\n        response.status === 404 ||\n        (contentType != null && contentType.indexOf('javascript') === -1)\n      ) {\n        // No service worker found. Probably a different app. Reload the page.\n        navigator.serviceWorker.ready.then(registration => {\n          registration.unregister().then(() => {\n            window.location.reload();\n          });\n        });\n      } else {\n        // Service worker found. Proceed as normal.\n        registerValidSW(swUrl, config);\n      }\n    })\n    .catch(() => {\n      console.log(\n        'No internet connection found. App is running in offline mode.'\n      );\n    });\n}\n\nexport function unregister() {\n  if ('serviceWorker' in navigator) {\n    navigator.serviceWorker.ready\n      .then(registration => {\n        registration.unregister();\n      })\n      .catch(error => {\n        console.error(error.message);\n      });\n  }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();\n"],"sourceRoot":""}