FreeCad to WebGL - Revision history

Aidan Williamson at 20:41, 7 October 2019

2019-10-07T20:41:12Z

← Older revision		Revision as of 20:41, 7 October 2019
Line 1:		Line 1:
			=Michel Method=
			<html><iframe width="560" height="315" src="https://www.youtube.com/embed/FR-34edcVeY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></html><br>
			<html><iframe width="560" height="315" src="https://www.youtube.com/embed/opaj0QzbmCI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></html><br>

	=GLTF Loader Technique=		=GLTF Loader Technique=
	==No Part Explosions==		==No Part Explosions==

Aidan Williamson at 21:06, 6 October 2019

2019-10-06T21:06:45Z

← Older revision		Revision as of 21:06, 6 October 2019
Line 68:		Line 68:
	##Upload your project files to that repo		##Upload your project files to that repo
	##<nowiki>https://username.github.io/modelname.html</nowiki> is where the project will be hosted.		##<nowiki>https://username.github.io/modelname.html</nowiki> is where the project will be hosted.


			{{Category:FreeCAD}} {{Category:WebGL}}

Aidan Williamson at 21:00, 6 October 2019

2019-10-06T21:00:28Z

@@ Line 24: / Line 24: @@
 #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.
 #Also download the [https://raw.githubusercontent.com/CabbageBreath/CabbageBreath.github.io/master/Stroke%20Limiter/styles.css style.css file] and include that in the same folder as the WebGL HTML file.
 ===Step 4: Create Index.html File===
@@ Line 50: / Line 49: @@
 If you need to you can change the starting point of the camera.
 #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

Aidan Williamson: /* No Part Explosions */

2019-10-06T20:56:42Z

No Part Explosions

@@ Line 1: / Line 1: @@
 =GLTF Loader Technique=
 ==No Part Explosions==
 ===Step 1: FreeCad to glTF===
 #In FreeCad, export your part as .obj and open it in Blender. Follow [[FreeCad to Blender]] guide.
@@ Line 16: / Line 22: @@
 #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.
 ##Just start by downloading this file: [https://raw.githubusercontent.com/CabbageBreath/CabbageBreath.github.io/master/Stroke%20Limiter/Stroke%20Limiter.html glTF Loader Template] and saving it in your project folder as ''Project Name.html''

Aidan Williamson: Created page with "=GLTF Loader Technique= ==No Part Explosions== ===Step 1: FreeCad to glTF=== #In FreeCad, export your part as .obj and open it in Blender. Follow FreeCad to Blender guide...."

2019-10-06T20:28:36Z

Created page with "=GLTF Loader Technique= ==No Part Explosions== ===Step 1: FreeCad to glTF=== #In FreeCad, export your part as .obj and open it in Blender. Follow FreeCad to Blender guide...."

New page

=GLTF Loader Technique=
==No Part Explosions==
===Step 1: FreeCad to glTF===
#In FreeCad, export your part as .obj and open it in Blender. Follow [[FreeCad to Blender]] guide.
#Make sure Blender has the GLTF Export Addon installed.
##Edit->Preferences->Addons-> Search for ''GLTF'' and install [https://docs.blender.org/manual/en/latest/addons/io_scene_gltf2.html Import-Export as GLTF 2.0]
#In Blender, File-> Export -> GLTF 2.0
##Save your file. It will save with filetype .glb

===Step 2: Create Project Folder===
#Create a project folder
#Create a subfolder for your javascript libraries. Include [http://threejs.org/build/three.min.js three.min.js] , [https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js GLTFLoader.js], and [https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js OrbitControls.js]
#Put your .glb file in your project folder

===Step 3: Create WebGL HTML File===
#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.
##Just start by downloading this file: [https://raw.githubusercontent.com/CabbageBreath/CabbageBreath.github.io/master/Stroke%20Limiter/Stroke%20Limiter.html glTF Loader Template] and saving it in your project folder as ''Project Name.html''