我正在使用TypeScript和three.d.ts从definitely typed。我没有问题使用THREE.JSONLoader,但是如何在TypeScript项目中使用来自here的OBJLoader。我可能需要创建一个OBJLoader.d.ts文件,但我不知道如何去做,然后如何使用创建的定义。我试图简单地复制THREE.JSONLoader定义并将其重命名为OBJLoader,但这并不起作用。如何在TypeScript中使用three.js加载OBJ模型
3
A
回答
2
说完看了看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
文件,或者如果您正在使用外部模块,请导入它们。
1
添加库到您的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
你不会得到类型检查,但直到有人增加了对装载机入口绝对键入这是上手的快捷方式。
相关问题
- 1. Three.js从缓存中加载obj模型
- 2. 如何在Three.js中加载.obj 3D模型?
- 3. Three.js加载大型模型
- 4. 在three.js中加载JSON模型
- 5. 如何使用obj + mtl加载多个jpg纹理文件THREE.js
- 6. opengl obj模型加载
- 7. 使用System.js在TypeScript中加载模块
- 8. 使用FastObjImporter在场景中加载和显示obj模型
- 9. THREE.js:使用JSONLoader加载模型只加载一半的纹理
- 10. Three.js FBXLoader无法在three.js中加载大FBX模型
- 11. 将OBJ模型加载到M3G中
- 12. Three.js OBJLoader .obj模型不投射阴影
- 13. 如何获得three.js中加载的.obj的绝对位置?
- 14. Three.js OBJLoader不加载obj文件
- 15. 在React中使用Three.js obj-loader
- 16. Three.JS如何在所有纹理/模型加载后渲染
- 17. Three.js不会加载搅拌机模型
- 18. 从Maya 8.5加载模型到THREE.JS
- 19. OpenGL加载OBJ模型,纹理失真
- 20. 使用Assimp和OpenGL加载和绘制.obj模型
- 21. 如何在加载Collada(dae)模型时在THREE.js中设置材质?
- 22. 如何克隆包含加载的.obj模型的组?
- 23. 如何更改使用OBJ + MTLLoader加载的模型的材质属性?
- 24. 如何使用用户输入中的three.js在场景中加载两个或更多.obj对象?
- 25. 在windows phone 7中加载3d模型.obj文件
- 26. 如何在joomla中加载模型?
- 27. Three.js OBJ装载机Raycaster获得父
- 28. 在OpenGL中加载.obj C
- 29. Typescript加载模块头痛
- 30. 如何在Codeigniter中将模型加载到模型中?
谢谢。我最初认为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