CODEWITHSUNDEEP
javascripthtmlmeteorthree.js
jmetz
jmetz

Reputation: 12783

How can I load three.js for specific templates

I know of two main approaches for loading external libraries into meteor, (as discussed in e.g. http://www.manuel-schoebel.com/blog/use-meteor-iron-router-waiton-to-load-external-javascript).

In addition there are meteor packages to load three.js globally.

Does anyone know how to use a template - level approach to get THREE working? I don't want three.js to load on all of the routes, but my attempt so far using ~

Template.threeview.onRendered(function(){

    Session.setDefault('threejs', false);
    // is library already loaded?
    if (Session.get('threejs') === false) {
        console.log('Requesting threejs...')
        $.getScript('/js/three.min.js', function() {
            Session.set('threejs', true);
            // the THREE object should now be accessible here
            // as well as in the window environment...?
            console.log(window.THREE);
            console.log(THREE);
        });
    };
});

doesn't work - I get 

undefined 
Uncaught ReferenceError: THREE is not defined

in the js console window.

Any ideas?

EDIT

Found this similar question Can't find three.js after loading through Ajax which suffers the same problem - I can confirm that loading from CDN works. Does any one have a better solution?

Upvotes: 1

Views: 324

Answers (1)

jmetz
jmetz

Reputation: 12783

Finally figured it out - the way to make this work is to edit the three.min.js source file. Removing/commenting 'use strict'; at the start of three.min.js lets it load correctly.

This seems to be related to the following feature/issue of meteor: https://github.com/meteor/meteor/issues/1380

The CDN was un-minified and didn't contain 'use strict;'. To be safe, 'use strict;' should probably be placed after the global THREE namespace has been declared.

Upvotes: 1

Related Questions