Guide to importing OBJ file into three.js using TypeScript

Currently, I am utilizing TypeScript along with three.d.ts obtained from definitely typed. While I have successfully been using THREE.JSONLoader, I am encountering difficulties with implementing an OBJLoader from here in a TypeScript project. It seems that I may need to generate an OBJLoader.d.ts file, although I lack the knowledge on how to construct it and subsequently apply the defined structure. I attempted to duplicate the THREE.JSONLoader definition and change it to OBJLoader, but unfortunately, this approach was not successful.

three.jstypescript

Answer №1

The most recent version of Three.js now includes ES Module versions of all the classes found in the examples/ directory, complete with type declaration files. This means that you can now:

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

When importing, it will be properly typed in TypeScript (allowing you to hover over it to see tooltips in VS Code).

Answer №2

This answer was accurate when originally posted, but it is now outdated in 2019. Check out the response from @trusktr below for a more current solution.

After examining the source code of the OBJLoader here (and referring to three.d.ts), a basic objloader.d.ts file could be as follows:

/// <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?
}

Keep in mind that this is a quick and untested solution, but it might help you get started.

To use this, include your objloader.d.ts file similar to how you include three.d.ts currently. Remember to also add both the three.js and OBJLoader.js files to your HTML page or import them if you are using external modules.

Answer №3

Incorporate the necessary libraries into your index.html file or angular-cli.json if you are using 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", <-- include
        "../node_modules/three/examples/js/loaders/MTLLoader.js" <-- include
        ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

Then use the libraries in your code like so: "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

Although you may not have type checking, this method allows you to quickly begin working with the loaders until an official entry is added to definitely typed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can TypeScript allow an argument to only accept keys that match another argument?

I'm currently developing a library that deals with linked lists. The current implementation is hardcoded to work with a list node type containing a "next" field that points to the next node of the same type. However, I am looking to make it more flexi ...

typescriptrecursive-datastructures

Is there a preferred method for correctly nesting components?

It may seem like a simple question, but I couldn't find the answer in the documentation or code examples. Consider this example: import { FlowIdentification } from "./flow-identification"; @customElement("bb-flow") export class R ...

typescriptweb-componentcustom-elementlit-elementlit

Explaining the distinction between include and rootDir in tsconfig.json

According to the information provided, include defines an array of filenames or patterns that are to be included in the program during the compilation process. On the other hand, rootDir specifies the path to the folder containing the source code of the ap ...

typescripttsconfig

Having issues with implementing toon shading in three.js on objects that are casting shadows

While working on creating a sphere that can cast and receive shadows using MeshToonMaterial, I'm encountering an issue with irregular shadowing in the darkest section. The sphere displaying irregular shadows: A closer examination of the sphere: The ...

three.jsshadershadow

Tips for adding a border to a table cell without disrupting the overall structure of the table

Looking for a way to dynamically apply borders to cells in my ng table without messing up the alignment. I've tried adjusting cell width, but what I really want is to keep the cells' sizes intact while adding an inner border. Here's the sim ...

htmlcsstypescriptprimeng

ESLint version 8.0.0 encountered an error while attempting to fetch the '@typescript-eslint' plugin

Hey there, I'm in need of some assistance. I encountered an error while trying to build a project. Uh-oh! Something didn't go as planned! :( ESLint: 8.0.0 TypeError: Failed to load plugin '@typescript-eslint' specified in ' ...

javascripttypescripteslinttypescript-eslint

Differences between ts-loader and babel-loader when working with TypeScript in webpack

Recently, I set out to compare the compiled output code between these two configurations. ts-loader { test: /\.tsx?$/, use: 'ts-loader', } babel-loader use: { loader: 'babel-loader', options: { p ...

typescriptwebpackbabeljsbabel-loaderts-loader

Issue with Cordova iOS not loading three.js files with .glb extension

I have a Cordova app (developed with react) that displays 3D models (.glb files) on my iPhone using three.js. After migrating from Cordova's iOS@5 platform to the newer ios@6 platform, the .glb files are no longer loading on the iPhone device. The m ...

ioscordovathree.js

Adjust the size of a stacked object on top of another object in real-time

Currently, I am working on a project using three.js where users have the ability to modify the dimensions of a 3D model dynamically. The issue I'm encountering is similar to a problem I previously posted about stacking cubes together, which you can fi ...

javascriptthree.js

Learn how to set expectations on the object returned from a spied method, Jasmine

I am currently faced with setting an expectation regarding the number of times a specific function called "upsertDocument" is executed. This function is part of a DocumentClient object within a getClient method in production. Here's how it looks: cli ...

typescriptjasmine

Surprising symbol detected: QwikJs

I'm currently working on a project that involves displaying a 3D model using Qwik and Three.js. While writing the code, I ran into an error message stating "unexpected identifier '$'". My initial thought is that this issue may be linked to s ...

three.jsjsxqwikqwikjs

Projector.js is now located in /examples/js/renderers/Projector.js within THREE.Projector

Currently, I've been encountering a problem with my three.js program specifically when rendering on Google Chrome. Despite successfully creating the scene, all objects appear black in color. Interestingly, the program functions flawlessly on Firefox; ...

three.js

Angular: finding out if Observable or BehaviorSubject has undergone any important modifications

I am facing an issue with my user object in a membership service. I need to ensure that my services are updated only when there are relevant changes in the user object. To determine if there are relevant changes in the user object, I compare it with the ...

angulartypescriptrxjs

What could be causing the rapid breakage of the socket in Ionic 3's Bluetooth Serial after just a short period

Although the code appears to be functioning correctly, it loses connection shortly after establishing it. This snippet contains the relevant code: import { Component } from '@angular/core'; import { Platform, NavController, ToastController, Ref ...

androidcordovatypescriptbluetoothionic3

What could be causing my NextAuthJS discord login to function in the test environment but fail to deploy in production on NextJS 13?

After attempting to deploy my NextJS application on Vercel, I encountered a problem with the AuthJS sign-in model. While running the program using npm run dev, everything works smoothly and I can log in to my Discord account linked to the developer portal& ...

javascriptreactjstypescriptnext.js

Encountering issues with vite build due to @types/react-router-dom package

I ran into an issue while developing my react app using Vite and TypeScript. Everything works fine when using Vite for development, but as soon as I switch to "tsc && vite build", I encounter numerous errors from @types/react-router-dom and @types/react-ro ...

reactjstypescriptreact-router-dom

"What is the significance of the .default property in scss modules when used with typescript

When dealing with scss modules in a TypeScript environment, my modules are saved within a property named default. Button-styles.scss .button { background-color: black; } index.tsx import * as React from 'react'; import * as styles from ' ...

cssreactjstypescriptsassstorybook

In Angular 2 Type Script service, make sure to include the @angular/core module for proper functionality as the 'require' method may not

I am encountering an issue with a service I am using. Whenever I try to start the page, I receive an error message. Here is the screenshot of the error: https://i.sstatic.net/WMzfU.png The compiled .js file contains the following code: reuired('@ang ...

node.jsangulartypescript

Managing unanticipated errors in Express while utilizing async/await mechanics

Consider this TypeScript code snippet: app.get('/test_feature', function (req: Request, res: Response) { throw new Error("This is the bug"); }); app.use(logErrors); function logErrors (err: Error, req: Request, res: Response, next: NextFun ...

javascriptexpresstypescripterror-handlingasync-await

What steps do I need to take to integrate the Firebase Admin SDK into my Angular project?

Is there a way to integrate Firebase Admin SDK into my Angular application? Currently, I am using Firebase Authentication services in my application and everything I need for user registration and authentication is handled by Angularfire2. I've read ...

angulartypescriptfirebaseexpressfirebase-authentication