为什么我从three.js得到“未捕获的ReferenceError:THREE未定义”错误,即使我添加了requirejs shim

时间:2017-01-17 16:39:32

标签: typescript three.js requirejs

运行我的代码时出现以下错误: 未捕获的ReferenceError:未定义THREE

module game {
    export class Add3DScene extends dragonwings.Command {

        @inject('ResponsiveDiv')     protected _responsiveDiv:          components.ResponsiveDiv;

        public execute(): void {
            super.execute();
            var scene = new THREE.Scene();
        }
    }
}

我无法尝试this解决方案,因为我无法访问嵌入式html

然而,我已经尝试了this但是添加垫片似乎并没有帮助,而且由于缺乏对如何将其合并到我的打字稿中的理解,我无法添加定义包装。

我可以看到在chrome调试器中加载了三个.min.js

我正在使用requirejs,这似乎引起了我在网上找到的一些并发症。这是我的配置的简化版本

requirejs.config({
    baseUrl: "content/${gamecode}/lib",
    paths: {
        TweenMax:           "gsap/TweenMax",
        THREE:              "three/three.min",
    },
    shim:
    {
        'THREE': {
            exports: 'THREE'
        },
        'game_libs': {
            deps: ['stats', 'TweenMax']
        },
        '../app/js/main': {
            deps: ['game_libs']
        },
    }
});

任何帮助表示赞赏

**编辑 在查看Require.js not loading Three.js后,我的其他模块不再被定义,所以我还没有完成我最初发布的关于代码的执行 新需要配置

define("three-glue", ["three"], function (three) {
    window.THREE = three;
    return three;
});
requirejs.config({
    baseUrl: "content/${gamecode}/lib",
    waitSeconds: 60,
    paths: {
        TweenMax:           "gsap/TweenMax",
        three:            "three/three.min",
    },
    map: {
        '*': {
            three: 'three-glue'
        },
    'three-glue': {
        three: 'three'
    },
    shim:
    {
        'game_libs': {
            deps: [
                'TweenMax'
            ]
        },
        '../app/js/main': {
            deps: ['game_libs']
        },
    }
}
});

1 个答案:

答案 0 :(得分:-1)

所以我添加地图很重要,如果它是在路径之后但在垫片之前添加的话,那么我就丢失了所有其他模块。如果我在垫片之后添加它,那么只有三个模块仍然缺失。

这是因为我忘了添加三个作为依赖。在纠正我的require配置后,我不再收到任何错误。

'../app/js/main': {
            deps: ['game_libs', 'three']
        },

感谢您的帮助