要求不按预期工作

require not working as expected

var THREE = require('three');
require('three/examples/js/loaders/OBJLoader.js');

在我从 node_modules 需要 threejs 之后,我决定使用他们提供的 OBJLoader,但是我收到了意外错误。

THREE is not defined
    at eval (eval at <anonymous> (experiment.js:133), <anonymous>:5:1)

在 OBJLoader 内部:

THREE.OBJLoader = function ( manager )

它告诉我 OBJLoader 中的三个未定义,尽管我在上面需要它。尝试以这种方式请求文件时我应该怎么做?

这是因为您正在尝试加载尚未安装的节点模块。有时,与该模块关联的其他依赖项还没有安装,可能会导致它失败。如果我是你,我会转到 npm 并只做 npm install three 然后用 var three = require('three'); 要求它。

Link 在 npm 上:https://www.npmjs.com/package/three

编辑:您列出的错误意味着根本没有找到该模块,这就是为什么我认为它更多地与您包含的路径以及可能还有其他依赖项有关。 NPM install 通常会修复所有问题。然后在您需要的对象上使用该方法,只需执行标准点符号

文件 three/examples/js/loaders/OBJLoader.js 不是必需的 - 没有 module.exports。仍然有可能 require 文件,但它只会尝试在该文件的上下文中执行代码 - 而在该文件的上下文中,没有定义变量 THREE。有问题的文件被设计为在定义了 window/global 变量三的浏览器中加载。

Three.js 是一个 client-side 库 - 要在浏览器中加载,您可以使用脚本标签:

<script src="js/three.min.js"></script>

这将在您的浏览器中建立一个变量 THREE,这样您就可以通过以下方式加载示例 OBJLoader.js:

<script src="js/OBJLoader.js"></script>

由于three.js,尤其是它的示例中的代码依赖于定义的全局变量THREE,使用browserify 之类的代码有点复杂。

我在 browserify-projects 中主要做的是创建一个如下所示的文件 three-loader.js

const THREE = require('three');

// make three available for files from examples
window.THREE = THREE;

// load stuff from examples
require('three/examples/js/loaders/OBJLoader.js');

module.exports = THREE;

并且项目中的所有地方都使用 const THREE = require('./three-loader'); 而不是 require('three');

另一种选择是将示例文件夹中的文件复制到您的项目中,并在这些文件的顶部添加一行 const THREE = require('three');