Question

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

Answer 1

查看了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文件，或者在使用外部模块时导入它们。

Answer 2

如果您使用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

您不会进行类型检查，但这是一种快速入门方式，直到有人为明确键入的加载器添加条目。

Answer 3

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

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

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

如何在TypeScript中加载带有three.js的OBJ模型

3 个答案: