将 Three.js 与 Meteor 一起使用答案

【问题标题】：Using Three.js with Meteor将 Three.js 与 Meteor 一起使用
【发布时间】：2014-07-06 16:09:59
【问题描述】：

我正在尝试将three.js 入门指南中的基本旋转立方体示例加载到基本流星应用程序中： http://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            var geometry = new THREE.CubeGeometry(1,1,1);
            var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
            var cube = new THREE.Mesh(geometry, material);
            scene.add(cube);

            camera.position.z = 5;

            var render = function () {
                requestAnimationFrame(render);

                cube.rotation.x += 0.1;
                cube.rotation.y += 0.1;

                renderer.render(scene, camera);
            };

I have added this code into a template js manager file of a new meteor app and then call the render function on the render of my template:

  Template.hello.rendered = function() {
         if (!this._rendered) {
             this._rendered = true;
             render();
         }
     }

My template

<template name="hello">

    <head>
        <title>My first Three.js app</title>
        <style>canvas { width: 100%; height: 100% }</style>
    </head>
<body>
</body>

</template>

我通过以下方式从 atomosphere 添加了三个.js： mrt加三并将包成功加载到我的应用程序中但是，当我启动流星时，我收到一个错误，即 THREE 未定义。我曾尝试将three.js 移动到lib 文件夹中，但没有奏效，因为我收到“self”未定义的错误。我认为这应该只作为客户端库加载。我曾尝试将它与客户端文件夹放在我的管理器文件下方，但这似乎也不起作用，而且看起来很hacky。似乎应该先加载陨石安装包，对吧？为什么我的模板管理器不提供此功能？

任何帮助将不胜感激。我对流星和three.js都是新手，所以我认为让这个基本演示工作真的会让我大开眼界。谢谢！

【问题讨论】：

非常感谢您的回复。我没有运气就试了一下。我仍然收到“未定义三个”的错误。我最初在我的原始项目中尝试在该文件夹中安装 min.three.js 包。我还尝试创建一个没有安装 three.js 气氛包的新应用程序，以确保它不会导致问题。在这两种情况下，我都会收到“未定义三个”的错误。我不明白为什么我的模板管理器不能使用三个。

标签： meteor three.js

【解决方案1】：

非常感谢您的反馈！在启动 Meteor 后通过 Bower 安装threejs 包后，我也尝试了 Bower，并在新项目中遇到了参考错误。我不确定是什么问题。

但是，我认为我发现了在客户端文件夹中使用 three.js 的问题。三是用 VAR 定义的，因此只有本地文件范围，不能从我的管理器文件中获得。有一个更新的大气包已对其进行了修改以使用全局范围： https://atmospherejs.com/package/three.js

这个包有效。我发现如果您将window.THREE = THREE; 添加到文件末尾，您也可以直接在客户端文件夹中使用最新的min.three.js 文件，而无需安装包——让本地THREE 变量访问全局范围。

最后，值得一提的是，我在 if Meteor.isClient 函数之外定义了我的“var 场景”和其他三个.js 代码，如我的问题中所示。由于我的 three.js 代码位于客户端文件夹中并且服务器无法访问，因此服务器抛出此错误。

我希望有人发现我的陷阱有帮助。 Meteor 肯定需要稍微一种新的方式来看待 JS 应用程序，但我认为它会非常棒。我很高兴能摆脱这个让我发疯的看似简单的问题。

【讨论】：

【解决方案2】：

THREE.js 库应该进入client/compatibility 文件夹。您尝试使用的软件包可能已被弃用。

编辑

您也可以尝试用Meteor.startup 包装您的THREEJS 代码，以确保仅在加载所有js 文件后才执行工作。 Meteor 的文件加载顺序一直令人头疼。

【讨论】：

【解决方案3】：

使用bower包并通过它添加三个js。

https://atmospherejs.com/package/bower

我发现很多关于大气的 wrapper 包都已经过时了，所以 bower 包是解决这类问题的一个很好的解决方案。

【讨论】：

可能值得添加 Meteor 的典型行为是加载嵌套在您的应用程序目录树中的最低文件夹中的文件first 即 /client/compatibility/config/ 中的任何 javascript 文件都会加载在/client/compatibility/之前。