Tuesday, October 25, 2016

how to generate JavaScript 3D for use in Open Source Physics?

how to generate JavaScript 3D for use in Open Source Physics?


  1. Install SketchUp http://www.sketchup.com/ 
  2. Find the 3D object file required in Open Source Physics say aeroplane 
  3. register to the SketchUp software if necessary and download the model
  4. save it on the desktop for ease of finding the model
  5. edit the model so that it is easy to use on the Easy Javascript Modeling tool for example, move the origin to the centre of the plane and aline the direction of the plane to RED x axis
  6. export the mode in format called OBJ and file name say sia or whatever you want
  7. now the file is ready, download the python package called webgl_convert.zip provided by Felix here
  8. save the zip file in the desktop and expand the zip file 
  9. if you need python, install it too https://www.python.org/ , use the latest 3.5.2 version
  10. copy the file sia.OBJ into the same folder as the convert folder 
  11. open terminal and navigate to the folder , for me was 
    • $ cd /Users/lookang/Desktop/webgl_convert/convert 
  12. to convert and use the python convert.py file, type in 
    • $ ./convert.py sia.obj sia.js
  13. that's it!. insert that just created sia.js file as a 3D object in EJSS in the description 


  14. double click the file sia.js and using an editor like notepad or xcode, add Object3D_ to the var declaration 
  15. save the file and copy it to the ejss folder for use.
  16. i used "./gimbal/Shuttle.js" , make sure a folder is used to hold all the assets in the Ejss source
  17. the example can be downloaded here https://dl.dropboxusercontent.com/u/44365627/lookangEJSworkspace/export/ejss_model_glimbal8wee02.zip 
  18. to view the output, try this https://dl.dropboxusercontent.com/u/44365627/lookangEJSworkspace/export/ejss_model_glimbal8wee02/glimbal8wee02_Simulation.xhtml