search

arventurers / shared-testing

shared testing to get started
0 stars 4 forks source link

Determine geometry format required #2

Closed twanito closed 7 years ago

twanito commented 7 years ago

Initial test workflow to run from Rhino/Grasshopper to produce still geometry that will work within an A-frame

twanito commented 7 years ago

Some links: file formats: https://aframe.io/docs/0.5.0/introduction/models.html writing a-frame components: https://aframe.io/docs/0.5.0/introduction/writing-a-component.html working with three.js: https://aframe.io/docs/0.5.0/introduction/developing-with-threejs.html

Initial thoughts: It'll probably be more robust to set up a workflow using three.js objects set as a-frame components so that we can add animation later and have greater control over texture etc...

twanito commented 7 years ago

Grasshopper to three.js tool: http://www.food4rhino.com/app/platypus?ufh= Of course Thornton Tomasetti have already made a tool for us! Rhino to obj. to three.js https://github.com/mrdoob/three.js/issues/2897 https://github.com/mrdoob/three.js/issues/3334

twanito commented 7 years ago

More updates and I'm done for the night. Have been reading some three.js json file parsing workflows. As I mentionned the "Spectacle WebViewer" is designed to read the output from their specified workflow.

This is their JSON parsing script: https://github.com/twanito/Spectacles.WebViewer/blob/gh-pages/js/SPECTACLES.js

Use this page to load the TreX.json and see what it looks like: http://tt-acm.github.io/Spectacles.WebViewer/

I'm not sure this is the best way forward but it does seem that three.js has a pretty smooth way of importing json files in the format provided by Spectacles: https://stackoverflow.com/questions/27992147/three-js-include-mesh-data-in-code/27996338#27996338

@riofriz you're the javascript man. What are your thoughts? Have you managed to just used .obj files? (that would be easier :p )

twanito commented 7 years ago

Right have finally done some more useful reading and a quick three.js course (I'll send the link if interested). Turns out I need to find a way to upload a model file to an A-frame scene as a component. For this we need to use: AFRAME.registerComponent (name, definition) and this is the structure to create a component: image

twanito commented 7 years ago

https://aframe.io/docs/0.6.0/core/component.html

twanito commented 7 years ago

Found it! This is the A-frame component creation script: image

And this below shows how you upload a json document into Three.js as well as extract geometry etc... from it. https://stackoverflow.com/questions/33577539/three-js-load-json-string

I reckon this is the cleanest and most rigorous way of doing things as we can then easily add animation end such by creating Three.js geometry natively rather than loading .obj files etc...

twanito commented 7 years ago

More rigorous approach to loading geometry: image

And this is how you remove it:

image

twanito commented 7 years ago

For future reference: https://aframe.io/docs/0.6.0/introduction/writing-a-component.html

twanito commented 7 years ago

Lol of course the json loader already exists. It's part of the aframe-extras project. https://github.com/donmccurdy/aframe-extras

OMG everything's there! https://github.com/donmccurdy/aframe-extras/tree/master/src/loaders