首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何用three.js在TypeScript中加载OBJ模型

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

Stack Overflow用户
提问于 2013-05-02 09:24:38
回答 3查看 6.4K关注 0票数 5

我正在使用TypeScriptthree.d.ts (来自绝对打字 )。使用THREE.JSONLoader,没有问题,但是如何在TypeScript项目中使用来自这里OBJLoader。我可能需要创建一个OBJLoader.d.ts文件,但是我不知道如何做,然后如何使用创建的定义。我试图简单地复制THREE.JSONLoader定义并将其重命名为OBJLoader,但这是行不通的。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-05-02 12:30:32

这个答案在发布的时候是正确的,但是它在2019年已经过时了。请参阅下面@trusktr的答复,以获得更好的解决方案。

在查看了OBJLoader 这里的源代码之后(并参考了three.d.ts),一个简单的objloader.d.ts文件可能如下所示:

代码语言:javascript
运行
复制
/// <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.jsOBJLoader.js文件,或者在使用外部模块时导入它们。

票数 1
EN

Stack Overflow用户

发布于 2019-07-25 19:40:37

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

代码语言:javascript
运行
复制
import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader'

并且它将按预期在TypeScript中键入(悬停在上面查看VS代码中的工具提示)。

票数 9
EN

Stack Overflow用户

发布于 2017-03-04 09:04:35

如果您使用的是index.html cli,则将库添加到您的angular2或angt-cli.json中:

代码语言:javascript
运行
复制
$ 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 (3 as any).MTLLoader( );":

代码语言:javascript
运行
复制
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

您不会得到类型检查,但这是一种快速的方式开始,直到有人添加一个条目的加载器明确键入。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16334505

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档