Skip to content

Steps

Jump to bottom
Amit Nambiar edited this page Nov 3, 2021 · 23 revisions

Morning Session:

Introduction

Soft introduction to git, github, web-apps and workshop content.

Click to see more info
  • Introductions
  • Workshop scope
  • Software requirements and account setups
  • Project repo, timeline and checkpoints
  • Git, Github and Github desktop

Check out the branch here: https://github.com/tt-acm/aectech2021-3dviewer/tree/workshop-start

Setup a node server

Set up the most basic http server.

Click to see the steps

Check out the branch here: https://github.com/tt-acm/aectech2021-3dviewer/tree/workshop-node-server
npm i
npm start

Setup a Vue project

Set up a Vue project with proxy to connect to backend server.

Click to see the steps

Check out the branch here: https://github.com/tt-acm/aectech2021-3dviewer/tree/workshop-vue-setup
npm i
npm run dev

Integrate threejs viewer

Add a Vue component for a threejs viewer.

Click to see the steps

Check out the branch here: https://github.com/tt-acm/aectech2021-3dviewer/tree/workshop-threejs-setup

Integrate UI framework

Setup Vuetify on the front end to create new UI elements. see: Install Vuetify npm package

Check out the branch here: https://github.com/tt-acm/aectech2021-3dviewer/tree/workshop-vuetify-setup

3js Viewer Settings

Setup UI elements for updating viewer settings.

Check out the branch here: https://github.com/tt-acm/aectech2021-3dviewer/tree/workshop-viewer-settings

Afternoon Session

Load 3dm model to the viewer

Add a sample 3dm model to local directory and load it into the 3js viewer.

Click to see the steps
  • Add a local 3dm model
  • 3dm loader setup (For converting rhino model elements into 3js objects)
  • Import geometries from local 3dm model

Check out the branch here: https://github.com/tt-acm/aectech2021-3dviewer/tree/workshop-3dm-loader

Connect to a firebase setup

Setup firebase auth, db, and storage for authentication and uploading/downloading models.

Click to see the steps
  • Install firebase(v8), firebaseui(v5) npm package. npm install [email protected] [email protected]
  • Add firebase reference to vue store.
  • Consume Firebase Auth for authentication, see here
  • Consume these references on SiteNav.vue for authentication.

Check out the branch here: https://github.com/tt-acm/aectech2021-3dviewer/tree/workshop-firebase-setup

Upload a 3dm model

Build an upload UI, and then upload the referenced file to firebase storage.

Click to see the steps

Download a 3dm model into the viewer

Retrieve an uploaded 3dm model from firebase storage, and load it into the viewer.

Click to see the steps
  • Create a dialog showing all available models
  • Use id extracted from user-selected model to find the corresponding record in firestore(database)
  • Retrieve a link to download from such database record. See Snippets
  • Setup correct firebase storage permission to bypass CORS error to enable download directly from our vue front end.
  • Load the downloaded rhino file into the viewer.

Note: you might run into CORS error while downloading the file in the browser, check out this documentation or our snippets (in case if you failed to download Google Cloud SDK). A walkthrough video is also available at the link below.
AECTech2021 Workshop - Firebase storage CORS settings

Check out the branch here: https://github.com/tt-acm/aectech2021-3dviewer/tree/workshop-storage-setup

Manage sharing and access control through firebase db

Build out a simple control to toggle the visibility of models.

Click to see the steps
  • Create a toggle for model visibility using Vuetify Switches. See snippets
  • Save the toggle value into a local variable called isPublic.
  • Update the corresponding record from firestore using value from isPublic. See snippets

Check out the branch here: https://github.com/tt-acm/aectech2021-3dviewer/tree/workshop-access-control

Deploy to firebase hosting

  • Install firebase CLI by running npm install -g firebase-tools
  • Log in by running firebase login
  • Setup hosting by running firebase init hosting, then choose one of your firebase project.
  • Answer questions in the following way:
? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
? File dist/index.html already exists. Overwrite? Yes
  • Firebase init finished running, you can build your project by running npm run build, to compile all of your code into the dist folder.
  • Finally, deploy your website by running firebase deploy --only hosting !

Enable third party cookies for Google login

Clone this wiki locally