Image from my Sketchbook showing the resulting copy and paste resulting Three.js JSON data to external scene

NOTE: Flux Sample App Review

NOTE: 0016 — Monday 04 September 2017

After conversing with the Flux team about resolving the Flux to Three.js JSON schema translation, they’ve wonderfully put together a sample app for me to demonstrate the possibility in doing this [https://github.com/flux-labs/flux-three-json], as shown below.

Sample Flux App built by Kyle from Flux

What’s happening here is that just as you would with building the default Flux app following their Flux SDK documentation, you can select a project from your account and select a key within that project.

From here the app will load:

1. The Raw data as followed by their core JSON schema in a re-sizeable text area box
2. The geometry in the Three.js Flux viewport
3. The Three.js JSON that is prevalent when referencing from external JavaScript files in a re-sizeable text area box

Pros:

• Projects and Keys to interact with for user’s account
• Flux and Three.js JSON are visible and comparable — also able to copy into an external document — such as a referenced .js file within a Three.js scene
• Flux viewport which is situated in the centre is created in Three.js

Cons:

• Made using React and additional features that wasn’t described in the Flux SDK tutorial — may be out of my depth / need to learn
• No interactivity with the objects themselves — however I know this is an app to just view the geometry. I am referring to specifically the default application we create in Flux as well.
• Can only view one key at a time
• Does not have some of the features as documented in Flux SDK
  > Create new keys
  > Make changes via sliders, etc

Questions:

• Would it be worth recreating the application without React? Instead by continuing / following the SDK tutorial + the snippets of code that allow for the creation of the Three.js JSON geometry? This will then allow me to add or combine additional features?
• Or I could potentially continue building on top of this application?

After reviewing what makes up this sample application compared to what the Flux SDK Documentation explains when building their app, there are some overlaps. However, because the sample app was built with React, the arrangement of code and what is referenced with what makes the process of understanding what they’ve done a little trickier to break down.

Referencing the Three.js JSON created in Flux into the boilerplate template

Above is a GIF showing the Three.js JSON being referenced in an external webpage I built prior — as borrowed from my space_moon Three.js scene. These are the results:

Pros:

• It works! Success of reading the JSON file when copied over from Flux

Cons:

• Awkward orbiting. Not 100% sure if it’s because of the way I’ve set up the camera / orbiting script
• Possibly has a scaling issue — the camera, or the model itself needs to be changed in order to keep the experience the same as you would with the Flux viewport. As seen in the GIF, the roof object is much larger and out of view. However, we can also try to figure out how to zoom to object extents as an alternative.

Questions:

• How will it show multiple ‘keys’?
• How will we be able to interact with the objects?
• Are we using the Flux viewport OR create our own Three.js scene that is connected to Flux?
• Should I pipe through the Flux Sample App’s Three.js JSON to an external Three.js scene? The only thing that will make it difficult is that it already requires your Flux account.

I have three options to figure out between

1. Building the app entirely in Flux — Using Flux SDK Documentation
   > No need for compiling
   > Have more control from understanding HTML, CSS and JavaScript
   > Requires Node.js command prompt to build onto localhost server
   > Becomes an app on Flux
2. Building the app using Flux and React — Compiled with React
   > Arrangement of code is slightly different compared to SDK Documentation
   > Can use ‘Create-React-App’ to streamline process of compiling
   > Becomes an app on Flux
3. Push and pull the data in and out of Flux — Acts as storage for data
   > It can show multiple keys at once
   > But this will need an external CRUD database (or server)to hold the data for each key
   > Can be tested with any device on the internet — i.e. possibly be hosted on Github

© Emily Y Leung and Project Redback, 2017. Unauthorized use and/or duplication of this material without express and written permission from this site’s author and/or owner is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to Emily Y Leung and Project Redback with appropriate and specific direction to the original content.

Last modified on Monday 04 September 2017