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

问题描述：

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

答

说完看了看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? 
}

警告：这是快速砍死在一起，而不是测试，但可能帮助你开始。

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

谢谢。我最初认为OBJLoader应该继承Loader而不是EventDispatcher。现在我可以看到，实际上调用了加载和解析函数。唯一的问题是回调。原始代码使用loader.addEventListener，我可以在Firebug中看到addEventListener未定义。但是，例如也从EventDispatcher继承的THREE.ImageLoader的确有addEventListener定义。我也试过像这样调用OBJLoader：loader.load（“myObject.obj”，（response）=> {// never reached}）; – Eiver 2013-05-02 12:46:20

进一步的调试显示，在第25行的OBJLoader.js中：scope.dispatchEvent（{type：'load'，content：response}）; dispatchEvent未定义，代码在那里停止。但在原始示例中，一切正常，并且我没有修改OBJLoader.js文件... – Eiver 2013-05-02 12:57:23

您在询问定义文件。现在我想你已经开始使用'objloader'了。我对此一无所知。 – JcFx 2013-05-02 13:32:32

答

添加库到您的index.html或您角cli.json如果你使用angular2 CLI：

$ 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" 
     } 
    } 
    ],

然后引用库像“变种mtlLoader =新（三成任意）.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

你不会得到类型检查，但直到有人增加了对装载机入口绝对键入这是上手的快捷方式。

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

相关推荐