CODEWITHSUNDEEP
javascripthtmlmeteorthree.js
2016rshah
2016rshah

Reputation: 681

How to put THREEjs code into separate JS file with meteor

Okay so I have a meteor app and I am trying to make templates that have THREEjs animations in them so I can load a specific animation by loading a specific template. I wanted to de-clutter my HTML file by taking out the script tags and moving them to a separate JavaScript file but that wasn't working. I ended up just putting the JavaScript into my HTML and it worked. I was going to just keep doing that and live with the cluttered code but now I have run into a problem.

For some odd reason even if a for loop is inside the script tags, the computer will see the < sign and expect a html tag. At first I thought I had forgotten a closing tag or something but I checked and I haven't. If I delete the for loop (only create one particle) everything works perfectly again. I could fix this by just using escape character for the < sign (&lt;) but I think I should find a solution to the overarching problem so I don't run into similar problems in the future.

All the examples for THREEjs put the code directly in the HTML file but how can I put it into a separate javascript file and make sure the javascript file finds min.three.js?

This is an overview of what the template looks like. I used jQuery to find actualAnimation2 and appended the container to that. You can also find all the code here

<template name = "animation2">
  <div id = "animation2" class = "centered">
    <div class = "line"></div>
      <h1>Animation 2</h1>
    <div class = "line"></div>
    {{> animationButtons}}
    <!--Put in a threejs animation here -->
    <div id = "actualAnimation2" class = "animation">
      <script src="client/three.min.js"></script>
      <script>
        //THREEjs stuff here
        //This is what I want to move
      </script>
    </div>
  </div>
</template>

tl;dr: How can I make THREEjs play nice with Meteor?

Any suggestions are welcome and let me know if I can clarify anything. Thank you for your help!

Upvotes: 1

Views: 978

Answers (2)

saimeunt
saimeunt

Reputation: 22696

Quoting http://docs.meteor.com/ :

Some JavaScript libraries only work when placed in the client/compatibility subdirectory. Files in this directory are executed without being wrapped in a new variable scope. This means that each top-level var defines a global variable. In addition, these files are executed before other client-side JavaScript files.

This is exactly what needs to be done with three.min.js because the beggining of the file looks like :

// threejs.org/license
'use strict';var THREE={REVISION:"68"};

So you need to put three.min.js inside cient/compatibility/.

But you are probably better off using a package, choose carefully the one who is more likely to upgrade to revision 69 quickly in a few weeks or so.

Upvotes: 1

stubailo
stubailo

Reputation: 6147

If I try to just copy and paste my JavaScript into a separate file, it won't find the min.three.js file (it tells me THREE isn't defined)

It sounds like you're running into an issue where your JS files are loaded before min.three.js. You might be able to fix that by taking advantage of Meteor's JS load order - files in directories called lib are loaded first, so if you put your min.three.js file inside /client/lib it will load before source files outside that directory.

Another option would be to use a package - for example, meteor add aralun:three.

Upvotes: 0

Related Questions