Question

我试图在Angular应用中使用Three.js。

要导入三，我只关注doc。所以我有这个：import * as THREE from 'three';

我也做过npm install @types/three --save。

当我尝试使用OBJLoader2

来使用我的模型时出现问题

首先，该文档说要使用var loader = new THREE.OBJLoader2();。但实际上，THREE.OBJLoader2未在'three'中定义，它在three/examples/js/loaders/OBJLoader2.js中定义，正如我在the official example中找到的那样。

所以，我试图以多种方式导入这个文件，但是我无法让它工作。我天真地尝试以这种方式导入文件： import ../../node_modules/three/examples/js/loaders/OBJLoader2.js'; 它正在编译，但我在导航器中有这个错误

OBJLoader2.js：8未捕获的ReferenceError：未定义THREE 在eval（OBJLoader2.js：8） at Object ... / .. / .. / .. / three / examples / js / loaders / OBJLoader2.js（vendor.bundle.js：430）

该文件如下所示：

'use strict';
if ( THREE.OBJLoader2 === undefined ) { THREE.OBJLoader2 = {} }
THREE.OBJLoader2 = (function () { ... })()

它将全局定义为THREE，但是TREE仅存在于我的组件中，所以我理解错误。

在导入文件之前，我还尝试声明THREE：

declare var THREE;

或

declare global{
  interface Window{THREE:any;}
}
import * as THREE from 'three';
window.THREE = THREE;

最后一个代码使错误消失，但是当我尝试使用加载器时

var loader = THREE.OBJLoader2();
loader.load('assets/untitled1.obj', callbackOnLoad, null, null, null, false);

我明白了：

错误类型错误：无法读取属性＆＃39;加载＆＃39;未定义的在AppComponent.initCube（app.component.ts:52）

所以我被困在这里，我无法在互联网上找到任何东西，相信没有人试图在打字稿中使用three.js导入模型。

非常感谢任何帮助。非常感谢您提前

Answer 1

我没有尝试过，但看起来https://bountify.co/angular-cli-three-js-blank-project-using-typescript-3

有一个解决方案

我认为重点是：

npm install three --save
npm install @ types / three --save-dev
从'三'

听起来你已经在做＃1和＃2

无法在Typescript中使用js文件

1 个答案: