FreeCad to WebGL

GLTF Loader Technique

No Part Explosions

Current Issues: Not all colors are processed by THREE. The colors appear when you view the glTF file in various software but not in WebGL.

Benefits of this approach:

1. Much smaller file sizes
2. Not much more html editing

Step 1: FreeCad to glTF

1. In FreeCad, export your part as .obj and open it in Blender. Follow FreeCad to Blender guide.
2. Make sure Blender has the GLTF Export Addon installed.
   1. Edit->Preferences->Addons-> Search for GLTF and install Import-Export as GLTF 2.0
3. In Blender, File-> Export -> GLTF 2.0
   1. Save your file. It will save with filetype .glb

Step 2: Create Project Folder

1. Create a project folder
2. Create a subfolder for your javascript libraries. Include three.min.js , GLTFLoader.js, and OrbitControls.js
3. Put your .glb file in your project folder

Step 3: Create WebGL HTML File

1. For now, just use my crappy template. With THREE.js you create a scene with controls, cameras, lights, perspective, window size. Don't worry about all that.
   1. Just start by downloading this file: glTF Loader Template and saving it in your project folder as Project Name.html
2. Open the html file in your choice of html editor and change the part name on line 66 to Project Name.glb. If the .glb file is in a different folder than the html file then you need to direct it to the proper subdirectory when you edit that line.
3. Also download the style.css file and include that in the same folder as the WebGL HTML file.

Step 4: Create Index.html File

1. This file will be at the root folder of your github repository. It does not go in the same folder as your WebGL file. But it could. The best hierarchy would be Repository with Index file, subfolder with WebGL html files and .glTF files, and then a subfolder with javascript libraries.
2. Again, just download my sample which I copied from Michel. Or if you are good with HTML then create something better.
   1. Index.html template
3. Change the following things:
   1. Line 5 is your page title
   2. Line 8 is a basic text title
   3. Line 10 is where the list of links begins. For you this would say <li><a href="PROJECT NAME/PROJECT NAME.html"> TITLE OF LINK </a> PROJECT DESCRIPTION </li>
      1. Change project name to match your project and put in a title of the link and a description of the file

Step 5: GitHub or GitLab

1. For Github: Create a repository called username.github.io
   1. the repo title is case sensitive.
2. Put the Index.html file in the repository
3. Put your project folder in the repository

Step 6: Viewing File

1. Navigate to username.github.io/Index.html
2. Click the link to your project
3. The project should appear.

Step 7: Changing Camera Start Point (optional)

If you need to you can change the starting point of the camera.

1. On lines 31-33 of the WebGL file you can modify the camera parameters including start point and where it is pointing at. Angles are in radians

Directly from FreeCad to WebGL

Primitive example from Aidan Log

Playing around with WebGL stuff. Here's a VERY primitive workflow:

1. Starting with A2+ assembly file
2. Select all on object tree
3. Export to WebGL.
4. Put resulting .html file in a folder with a subfolder containing three.min.js
5. Open resulting .html file in a text editor
6. Edit three.min.js source as per Michel's instructions
   1. Also can add antialiasing if desired. See video:
   2. 
7. Optional: make an index.html file. Embedding the index seems to be more stable.
8. Create a github.io page
   1. In your github account: Make a new repo with name username.github.io
      1. My username is CabbageBreath
   2. Upload your project files to that repo
   3. https://username.github.io/modelname.html is where the project will be hosted.

All things FreeCAD