Title: Embedding WebGL using external JS
Last modified: July 22, 2020

---

# Embedding WebGL using external JS

 *  Resolved [js493cam](https://wordpress.org/support/users/js493cam/)
 * (@js493cam)
 * [5 years, 10 months ago](https://wordpress.org/support/topic/embedding-webgl-using-external-js/)
 * This is the bit where I out myself as a total WP noob (because that’s exactly
   what I am).
 * I’m trying to embed a WebGL viewer of a molecular graphics simulation called 
   3Dmol.js. I’ve been trying to follow the instructions from the developers’ website(
   [http://3dmol.csb.pitt.edu/doc/tutorial-embeddable.html](http://3dmol.csb.pitt.edu/doc/tutorial-embeddable.html))
   but all I get is a blank block in my website. What I want is the code below to
   display the viewer:
 *     ```
        <script src="http://3Dmol.csb.pitt.edu/build/3Dmol-min.js" async></script>     
                <div style="height: 400px; width: 400px; position: relative;" class='viewer_3Dmoljs' data-pdb='2POR' data-backgroundcolor='0xffffff' data-style='stick'></div>  
       ```
   
 * When I write the above lines as a standalone HTML file, it works brilliantly,
   but when I try to emded it it fails. I’ve tried putting the script src in a header,
   to no avail. I’ve tried enclosing it in pre tags, to no avail. I think there’s
   just something preventing the viewer from displaying that I can’t figure out.
   Any ideas? TIA.
    -  This topic was modified 5 years, 10 months ago by [js493cam](https://wordpress.org/support/users/js493cam/).
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fembedding-webgl-using-external-js%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Moderator [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/)
 * (@sterndata)
 * Volunteer Forum Moderator
 * [5 years, 10 months ago](https://wordpress.org/support/topic/embedding-webgl-using-external-js/#post-13155712)
 * first off, as your site is https, you need to invoke that script via https, not
   http.
 * Secondly, it appears that it’s using jQuery incorrectly. WordPress uses jQuery
   in safe mode, which is why you get `$ is not a function`.
 *     ```
       Uncaught TypeError: url.indexOf is not a function
           at jQuery.fn.init.jQuery.fn.load (3Dmol.js:10091)
           at theme-scripts.js?ver=5.4.2:289
       3Dmol.js:3841 jQuery.Deferred exception: $ is not a function TypeError: $ is not a function
           at Object.$3Dmol.autoload (https://3dmol.csb.pitt.edu/build/3Dmol.js:26230:9)
           at HTMLDocument.<anonymous> (https://3dmol.csb.pitt.edu/build/3Dmol.js:26434:12)
           at mightThrow (https://3dmol.csb.pitt.edu/build/3Dmol.js:3557:29)
           at process (https://3dmol.csb.pitt.edu/build/3Dmol.js:3625:12) undefined
       jQuery.Deferred.exceptionHook @ 3Dmol.js:3841
       3Dmol.js:3850 Uncaught TypeError: $ is not a function
           at Object.$3Dmol.autoload (3Dmol.js:26230)
           at HTMLDocument.<anonymous> (3Dmol.js:26434)
           at mightThrow (3Dmol.js:3557)
       ```
   
 *  Thread Starter [js493cam](https://wordpress.org/support/users/js493cam/)
 * (@js493cam)
 * [5 years, 10 months ago](https://wordpress.org/support/topic/embedding-webgl-using-external-js/#post-13155860)
 * Oh my word – just adding the https fixed this. Of all the things not to spot…
   Thanks very much for your help!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Embedding WebGL using external JS’ is closed to new replies.

## Tags

 * [webgl](https://wordpress.org/support/topic-tag/webgl/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 2 replies
 * 2 participants
 * Last reply from: [js493cam](https://wordpress.org/support/users/js493cam/)
 * Last activity: [5 years, 10 months ago](https://wordpress.org/support/topic/embedding-webgl-using-external-js/#post-13155860)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics