如何在Angular 6项目中导入Three.js加载器并扩展其类型定义

我来帮你搞定这个问题，刚好我在Angular项目里处理过类似的Three.js类型扩展需求，既不用把THREE声明为any规避校验，还能完美扩展自定义函数，同时也会告诉你加载器的正确导入方式。

一、扩展Three.js命名空间的自定义函数（保留类型检查） #

要实现THREE.myFunction()这种全局调用的自定义函数，核心是通过TypeScript的命名空间扩展和自定义类型声明文件来实现，步骤如下：

1. 创建/修改自定义类型声明文件 #

在你的Angular项目src目录下，创建（如果已有则直接编辑）typings.d.ts文件——Angular会自动识别这个目录下的.d.ts文件作为全局类型声明。

在文件中添加对THREE命名空间的扩展，声明你要添加的函数类型：

// src/typings.d.ts
declare namespace THREE {
  // 声明自定义函数的类型签名，参数和返回值根据你的需求调整
  function myFunction(param: string): void;
  
  // 还可以添加更多自定义函数或属性，比如：
  // function calculateMeshArea(mesh: THREE.Mesh): number;
}

2. 实现自定义函数并挂载到THREE #

创建一个工具类或服务（比如three-extensions.service.ts）来实现你的自定义函数，并挂载到THREE对象上：

// src/app/services/three-extensions.service.ts
import * as THREE from 'three';

// 实现自定义函数
THREE.myFunction = function(param: string): void {
  console.log(`自定义Three.js函数执行，传入参数：${param}`);
  // 这里可以编写你的业务逻辑，比如操作Three.js的场景、网格等对象
  // 示例：创建一个基础立方体
  const cube = new THREE.Mesh(
    new THREE.BoxGeometry(1,1,1),
    new THREE.MeshBasicMaterial({color: 0xff0000})
  );
  console.log('创建的立方体：', cube);
};

3. 全局引入扩展（或按需导入） #

为了让自定义函数在整个项目中可用，你可以在app.module.ts中导入这个扩展文件：

// src/app/app.module.ts
import './services/three-extensions.service';
// 其他模块导入...

之后在任何组件中，你就可以直接调用THREE.myFunction('测试参数')，TypeScript会自动识别函数类型，不会抛出类型错误，也不需要将THREE设为any。

二、正确导入Three.js加载器 #

Three.js的加载器（比如GLTFLoader、OBJLoader等）分为核心自带的ES模块加载器和第三方加载器，以下是两种场景的导入方式：

1. 导入核心ES模块加载器（推荐） #

现在Three.js的官方示例加载器大多以ES模块的形式放在three/examples/jsm/loaders目录下，且@types/three已经包含了这些加载器的类型定义。

首先确保你已经安装了匹配版本的three和@types/three：

npm install three @types/three --save

然后在组件或服务中直接导入并使用：

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';

// 使用GLTFLoader加载模型
const gltfLoader = new GLTFLoader();
gltfLoader.load('assets/models/my-model.gltf', (gltf) => {
  // 处理加载完成的模型
  console.log('加载完成的GLTF模型：', gltf.scene);
});

// 使用OBJLoader加载模型
const objLoader = new OBJLoader();
objLoader.load('assets/models/my-model.obj', (obj) => {
  console.log('加载完成的OBJ模型：', obj);
});

2. 处理旧版全局挂载的加载器 #

如果遇到一些旧版的加载器（挂载到THREE命名空间下），你需要先确保加载器的脚本被引入，然后在typings.d.ts中补充类型声明（如果@types/three没有包含的话）：

比如，假设你要使用某个旧版的CustomLoader：

// src/typings.d.ts
declare namespace THREE {
  class CustomLoader extends THREE.Loader {
    load(url: string, onLoad: (data: any) => void): void;
    // 补充其他方法的类型声明
  }
}

然后在angular.json的scripts数组中添加加载器的脚本路径：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "scripts": [
              "node_modules/three/examples/js/loaders/CustomLoader.js"
            ]
          }
        }
      }
    }
  }
}

之后就可以直接使用new THREE.CustomLoader()，TypeScript会识别其类型。

注意事项 #

• 确保@types/three的版本和three的版本保持一致，避免类型不匹配的问题；
• 如果typings.d.ts没有被识别，可以检查tsconfig.json的include数组，确保包含了src/**/*.d.ts；
• 优先使用ES模块形式的加载器，更符合Angular的模块化开发规范。

内容的提问来源于stack exchange，提问作者sentenza