Briefing Document: 3D JavaScript Generation for Open Source Physics

1. Overview

This document summarizes a tutorial on creating and integrating 3D models into Open Source Physics (OSP) simulations, specifically using the Easy JavaScript Simulations (EJSS) environment. The tutorial outlines a workflow involving readily available tools and a Python conversion script to achieve this. It provides a step-by-step guide for users interested in enhancing their OSP simulations with custom 3D visualizations. The document is primarily targeted towards educators and developers using the Open Educational Resources / Open Source Physics @ Singapore platform.

2. Main Themes

• 3D Model Integration into OSP: The central theme is how to bring custom 3D models, often developed in software like SketchUp, into the JavaScript-based EJSS simulation environment. This enables the creation of more engaging and visually rich interactive learning experiences.
• Accessibility and Open Source: The entire process leverages open-source tools and resources. The methodology is designed to be accessible to users without specialized programming skills, promoting wider adoption in education. The use of "Open Educational Resources / Open Source Physics @ Singapore" highlights the open nature of this project.
• Practical, Step-by-Step Guide: The document provides a very clear, actionable list of steps, making it easy for users to replicate the process. It goes from initial model creation, through conversion to use in an EJSS project.
• Emphasis on Visual Learning: The inclusion of 3D models shows an intent to cater to visual learners and to enhance comprehension through improved graphical representations of complex scientific concepts and objects.
• Community and Collaboration: The source cites the use of code developed by Felix, and the examples showcase the collaborative nature of the project, where users and developers contribute to the body of resources.

3. Key Ideas and Facts

• Software Tools:SketchUp: Used to create or modify 3D models. The tutorial assumes familiarity with SketchUp.
• Python: Used for running the conversion script to transform the 3D model into a JavaScript format readable by EJSS. Python version 3.5.2 is recommended.
• EJSS (Easy JavaScript Simulations): The target environment for the 3D models to be integrated.

1. 3D Model Workflow:Model Creation or Download: The process starts with obtaining a 3D model (e.g., an airplane), often in a format compatible with SketchUp.
2. Model Editing (SketchUp): It's essential to modify the model, such as moving the origin to the center and aligning it with the x-axis to make it compatible with EJSS tools. The document suggests, "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."
3. Export to OBJ: The model is exported in the OBJ file format. The example suggests a filename "sia.obj".
4. Python Conversion: A provided Python script (convert.py) is used to transform the OBJ file to a JavaScript (.js) file.

• The command line is python2 convert.py sia.obj Object3D_sia.js

1. JavaScript File Modification: The generated JavaScript file needs to be modified by adding "Object3D_" to the variable declaration. The document says, "double click the file sia.js and using an editor like notepad or xcode, add Object3D_ to the var declaration."
2. Integration into EJSS: The final JavaScript file is added to the EJSS project. The author suggests storing the file in a dedicated folder within the EJSS project, as done with "./gimbal/Shuttle.js".

• Example Simulation: The tutorial points to a specific example, a flight dynamics gimbal simulation called "glimbal8wee02", which demonstrates how the produced 3D models are incorporated. The document provides two links:
• Download link for the simulation files: "https://sg.iwant2study.org/ospsg/index.php/interactive-resources/mathematics/measurement-and-geometry/geometry/2-3d-shapes/438-glimbal8wee02-1"
• Viewable Simulation: "https://iwant2study.org/lookangejss/math/ejss_model_glimbal8wee02/glimbal8wee02_Simulation.xhtml"
• GitHub Repository: The repository housing the Python conversion tool is hosted on GitHub at "https://github.com/lookang/codesforejss/blob/master/webgl_convert/convert/ReadMe.md". This reinforces the open and shared nature of this work.
• Licensing: The content on the site is licensed under Creative Commons Attribution-Share Alike 4.0 Singapore License. Commercial use of the underlying EasyJavaScriptSimulations library requires contacting This email address is being protected from spambots. You need JavaScript enabled to view it..

4. Quotes

• "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" - This highlights a crucial editing step in SketchUp for compatibility.
• "double click the file sia.js and using an editor like notepad or xcode, add Object3D_ to the var declaration" - This illustrates the simple code modification necessary to make the file work with EJSS.
• "i used "./gimbal/Shuttle.js" , make sure a folder is used to hold all the assets in the Ejss source" - Emphasizing the importance of proper file organization within the EJSS project structure.

5. Conclusion

This document provides a concise and practical workflow for educators and developers to incorporate custom 3D models into their Open Source Physics simulations using EJSS. By utilizing readily available software and a simple Python conversion script, it democratizes the process of creating visually engaging educational tools. The provided example and links make it easy for users to understand and replicate the process. This resource also promotes open sharing and collaboration within the OSP community.

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  https://github.com/lookang/codesforejss/blob/master/webgl_convert/convert/ReadMe.md provided by Felix   https://github.com/lookang/codesforejss/blob/master/webgl_convert/convert/ReadMe.md
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 
    • \) python2 convert.py sia.obj Object3D_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://sg.iwant2study.org/ospsg/index.php/interactive-resources/mathematics/measurement-and-geometry/geometry/2-3d-shapes/438-glimbal8wee02-1
18. to view the output, try this https://iwant2study.org/lookangejss/math/ejss_model_glimbal8wee02/glimbal8wee02_Simulation.xhtml
19. https://sg.iwant2study.org/ospsg/index.php/interactive-resources/mathematics/measurement-and-geometry/geometry/2-3d-shapes/438-glimbal8wee02-1 for the example Prof Felix made possible! 
20.