Tutorial: embed cool javascript visuals from github into webflow

[Gijs_1 (Gijs)]

Important:
It’s not meant as a long term solution.
There is a caveat to using embedded code from third party services:

• There is no guarantee that the resource will remain unchanged or persist at the URL you are using.
• Performance issues can occur, leading to slow page load times, broken features.
• Make sure you have permission to use.

I am unexperienced at this and I wrote this tutorial for other people like me for them to get used with how code works in playfull way and get cool inspiring results without having to go through a whole lot of time-consuming digging for info and potentially getting stuck.

https://threejs.org/ has cool visuals. Take a look at their featured projects!

1. Now go to:
   three.js examples
   Look for on a example you would like to embed.
   I choose this one: three.js examples

2. Click on the view source button on the bottom right of the screen

3. You get redirected to the githubpage. Now copy all of the code and paste it into a document

4. If you would paste this code into an embed box on your webflow site, nothing would happen because the references to the javascript files and images are pointing to local files of the github map. So we have to make all those files accessible on the www

5. Search the links to javascript files and images in the code.
   Javascript can be found by searching (ctrl+f on windows) for: <script src=
   You’ll see they are probably pointing at locations like …/build/three.js or js/WebGL.js

6. We now have to replace those links with www-links.
   The locations now like …/build/three.js or js/WebGL.js are resembling the maps and the files in the github.
   So if I want to make a github file accessible, for example …/build/three.js
   We go to the map build and click on three.js

7. You will see one of the options below. Click on RAW view
   

   
   
   
   

8. a new tab opens.
   In the case of three.js this is for example
   https://raw.githubusercontent.com/mrdoob/three.js/master/build/three.js

9. Copy the url
   open https://combinatronics.com/
   paste the url
   You’ll get a new link
   Congratulations you now have a link that can be accessed on the www!

10. Copy the new url-link
    Paste it in the place where the old one used to be.
    So
    <script src="../build/three.js"></script>
    Turns into:
    <script src="https://combinatronics.com/mrdoob/three.js/master/build/three.js"></script>

11. Do this for all your links to js files. There may be some more.

12. I mentioned images earlier. The same problem occurs.
    For example I tried to embed this one: three.js examples
    But the globe didn’t show up because it couldn’t find the image.
    This was the problem:
    loader.load( 'textures/land_ocean_ice_cloud_2048.jpg', function ( texture ) {
    You see it is pointing at a jpg-file which I don’t have.
    So i looked for the image url and replaced the code with a url that can be accessed. It now turned into:
    loader.load( "https://threejs.org/examples/textures/land_ocean_ice_cloud_2048.jpg" , function ( texture ) {

13. Now go to webflow and select the html-embed component in the menu.
    Copy paste the code.
    Publish.
    Smile.
    Enjoy!

That’s all folks!

Many thanks to https://discourse.webflow.com/u/sagdfnj_sagdfnj
for explaining the github conversion on How to embed files hosted on Github - #5 by samliew

[webdev (Jeff Selser)]

There is a caveat to using embedded code from third party services.

• There is no guarantee that the resource will remain unchanged or persist at the URL you are using.
• Performance issues can occur, leading to slow page load times, broken features.
• Make sure you have permission to use.

[Gijs_1 (Gijs)]

Thank you @webdev for this caveat. I’ll edit my original post and put your text in as a disclaimer.
I am unexperienced at this and I wrote this tutorial for other people like me to get used in playfull way with how code works and see cool inspiring results, without having to go through a whole lot of time consuming digging for info and potentially getting stuck.
It’s not meant as a long term solution. I’ll put my intention in the original post to make that more clear.

[joejola (Joseph Amato)]

What if you have multiple libraries to import? For instance, mine says (three.js/webgl_depth_texture.html at master · mrdoob/three.js · GitHub):

import * as THREE from '../build/three.module.js';
import Stats from './jsm/libs/stats.module.js';
import { GUI } from './jsm/libs/dat.gui.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';

Do I need a new link for each one? And once I’ve created the new link, do I remove this code?

Thanks!