如何在 TypeScript 中使用 three.js 加载 OBJ 模型

Posted 2023-02-27

【中文标题】如何在 TypeScript 中使用 three.js 加载 OBJ 模型

【英文标题】：How to load OBJ model with three.js in TypeScript

【发布时间】：2013-04-26 09:59:43

【问题描述】：

我正在使用TypeScript 和来自definitely typed 的three.d.ts。我使用 THREE.JSONLoader 没有问题，但是如何在 TypeScript 项目中使用来自here 的 OBJLoader。我可能需要创建一个 OBJLoader.d.ts 文件，但我不知道如何去做，然后如何使用创建的定义。我试图简单地复制 THREE.JSONLoader 定义并将其重命名为 OBJLoader，但这不起作用。

【参考方案1】：

最新的 Three.js 现在在 examples/ 文件夹中包含所有类的 ES 模块版本，以及类型声明文件。所以，现在你可以：

import OBJLoader from 'three/examples/jsm/loaders/OBJLoader'

它将按预期在 TypeScript 中输入（将鼠标悬停在其上以查看 VS Code 中的工具提示）。

【讨论】：

非常感谢。这比添加单独的 npm 包或其他建议的解决方案要容易得多！

【参考方案2】：

此答案在发布时是正确的，但现在已在 2019 年过时。请参阅下面@trusktr 的回复以获取今天更好的解决方案。

查看 OBJLoader here 的源代码（并参考 three.d.ts）一个简单的 objloader.d.ts 文件可能如下所示：

/// <reference path="three.d.ts" />

export class OBJLoader extends EventDispatcher 
        constructor();
        load(url: string, callback?: (response:any) => any): void;
        parse(data:any):any; // Not sure if the return value can be typed. Seems to be a group but I can't find a definition for that in three.d.ts?

警告：这是快速组合在一起的，未经测试，但可以帮助您入门。

然后您将引用您的objloader.d.ts，就像您当前使用three.d.ts 一样。不要忘记在您的 html 页面中包含 three.js 和 OBJLoader.js 文件，或者如果您正在使用外部模块，请导入它们。

【讨论】：

谢谢。我最初认为 OBJLoader 应该继承自 Loader 而不是 EventDispatcher。我现在可以看到，实际上调用了 load 和 parse 函数。唯一的问题是回调。原始代码使用 loader.addEventListener，我可以在 Firebug 中看到，addEventListener 是未定义的。但例如也继承自 EventDispatcher 的 THREE.ImageLoader 确实定义了 addEventListener。我也尝试像这样调用 OBJLoader：loader.load("myObject.obj", (response) => //never达到);

进一步调试显示在 OBJLoader.js 第 25 行：scope.dispatchEvent( type: 'load', content: response ); dispatchEvent 未定义，代码停在那里。但是在原始示例中一切正常，我没有修改 OBJLoader.js 文件...

您询问的是定义文件。现在我认为您正在使用objloader。我对此一无所知。

根据定义 load() 接受一个字符串和一个回调函数作为输入。由于某种原因，在 OBJLoader 完成其工作后不会调用回调。这仅在打字稿中发生，因为纯 JS 示例工作得很好。所以要么定义不正确，要么我以错误的方式使用它。无论如何，我将问题标记为已回答，因为答案让我更接近解决方案

【参考方案3】：

如果您使用 angular2 cli，请将库添加到您的 index.html 或 angular-cli.json：

$ cat angular-cli.json

  "project": 
    "version": "1.0.0-beta.16",
    "name": "ssp"
  ,
  "apps": [
    
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [
        "../node_modules/three/build/three.js",
        "../node_modules/three/examples/js/controls/VRControls.js",
        "../node_modules/three/examples/js/effects/VREffect.js",
        "../node_modules/webvr-boilerplate/build/webvr-manager.js",
        "../node_modules/dat-gui/vendor/dat.gui.js",
        "../node_modules/stats-js/build/stats.min.js",
        "../node_modules/three/examples/js/controls/OrbitControls.js",
        "../node_modules/three/examples/js/loaders/OBJLoader.js", <-- add
        "../node_modules/three/examples/js/loaders/MTLLoader.js" <-- add
        ],
      "environments": 
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      
    
  ],

然后引用类似“var mtlLoader = new (THREE as any).MTLLoader( );”之类的库：

var mtlLoader = new (THREE as any).MTLLoader( );
mtlLoader.setPath( '../../assets/models' );
mtlLoader.load( 'myProject.mtl', function( materials ) 
  materials.preload();
  var loader = new (THREE as any).OBJLoader();
  loader.setMaterials(materials);
  loader.load( '../../assets/models/myProject.obj', function(object) 
... do stuff

您不会进行类型检查，但这是一种快速入门的方法，直到有人将加载程序的条目添加到确定类型。