How to load an obj file?

Question

How to load an obj file?

Closed this issue 6 years ago · 24 comments

Hi folks! Thanks for maintaining this project!

I'm wondering if you have an example of loading an OBJ file and applying a texture? All I want to achieve is to being able to load a model, apply a texture and rotate it.

This is what I have so far:

import React, { Component } from 'react';
import { ScrollView, Text, StyleSheet } from 'react-native';
import Expo, { Asset, GLView } from 'expo';
import * as THREE from 'three';
import ExpoTHREE from 'expo-three';
global.THREE = THREE;
require('./OBJLoader');


console.disableYellowBox = true;


export default class ModelScreen extends Component {
  static navigationOptions = {
    title: '3D Model',
  };

  state = {
    loaded: false,
  }

  componentWillMount() {
    this.preloadAssetsAsync();
  }

  async preloadAssetsAsync() {
    await Promise.all([
      require('../assets/suzuki.obj'),
      require('../assets/MotociklySuzuki_LOW001.jpg'),
      require('../assets/male02.obj'),
      require('../assets/UV_Grid_Sm.jpg'),
    ].map((module) => Asset.fromModule(module).downloadAsync()));
    this.setState({ loaded: true });
  }

  onContextCreate = async (gl) => {
    const width = gl.drawingBufferWidth;
    const height = gl.drawingBufferHeight;
    console.log(width, height);
    gl.createRenderbuffer = () => {};
    gl.bindRenderbuffer = () => {};
    gl.renderbufferStorage  = () => {};
    gl.framebufferRenderbuffer  = () => {};

    const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 2000 );
		camera.position.z = 250;

    const scene = new THREE.Scene();
		const ambient = new THREE.AmbientLight( 0x101030 );
		const directionalLight = new THREE.DirectionalLight( 0xffeedd );
		directionalLight.position.set( 0, 0, 1 );
    scene.add(ambient);
		scene.add(directionalLight);

    // Texture
    const textureAsset = Asset.fromModule(require('../assets/MotociklySuzuki_LOW001.jpg'));
    const texture = new THREE.Texture();
    texture.image = {
      data: textureAsset,
      width: textureAsset.width,
      height: textureAsset.height,
    };;
		texture.needsUpdate = true;
    texture.isDataTexture = true;
    const material =  new THREE.MeshPhongMaterial({ map: texture });

    // Object
    const modelAsset = Asset.fromModule(require('../assets/suzuki.obj'));
    const loader = new THREE.OBJLoader();
    const model = loader.parse(
      await Expo.FileSystem.readAsStringAsync(modelAsset.localUri));

    model.traverse((child) => {
      if (child instanceof THREE.Mesh) {
        child.material = material;
      }
    });

    model.position.y = - 95;
		scene.add(model);


    const renderer = ExpoTHREE.createRenderer({ gl });
    renderer.setPixelRatio(2);
		renderer.setSize(width, height);


    const animate = () => {
      // camera.position.x += ( 7.25 - camera.position.x ) * .05;
			// camera.position.y += ( 62.75 - camera.position.y ) * .05;

			camera.lookAt( scene.position );

			renderer.render( scene, camera );
      gl.endFrameEXP();
      requestAnimationFrame(animate);
    };
    animate();
  };

  render() {
    return (
      <ScrollView style={styles.container}>
        <Text>This is your avatar:</Text>
        { this.state.loaded &&
          <GLView
            ref={(ref) => this.glView = ref}
            style={styles.glview}
            onContextCreate={this.onContextCreate}
          />
        }
        <Text>Something here!</Text>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 15,
    backgroundColor: '#fff',
  },
  glview: {
    width: 350,
    height: 500
  },
});

I don't get any errors, the app builds and runs ok, but I don't see anything on the GLView, any pointers?

Thanks in advance!

Answer 1 · 2017-11-30T01:32:27.000Z

As of 2.0.6 you can now call ExpoTHREE.loadAsync and this will load your models!

Example Snacks!

Basic .obj + .mtl: https://snack.expo.io/@bacon/load-simple-obj-model
More complex .obj + .mtl: https://snack.expo.io/@bacon/load-obj-mtl

Answer 2 · 2017-12-11T01:12:27.000Z

These snacks don't work

Answer 3 · 2017-12-12T00:56:10.000Z

@kevin-bache I think there is a bug right now that is preventing the assets from being bundled. If you "Export to XDE" then add "obj", "mtl" to the assetExts then they will run! 😅😁

"packagerOpts": {
  "assetExts": [
    "ttf",
    "mp4",
    "otf",
    "xml",
    "obj",
    "mtl"
  ]
}

Answer 4 · 2018-01-27T01:39:56.000Z

Hi Evan,

When I try to load and .obj file, I got the following error:

Unable to resolve ../assets/objects/low-poly-chest.obj" from "./C:\\Users\\haoha\\quest\\screens\\CameraNav.js: could not resolve C:\\Users\\haoha\\quest\\assets\\objects\\low-poly-chest.obj' as a file nor as a folder","name":"UnableToResolveError","type":"UnableToResolveError","errors":[{}]},"type":"bundling_error"}"
It's as if expo doesn't recognize .obj file, and my expo-three is version 2.2.0.
Do you know what might be happening here? I am certain that my path is correct, thank you!

Answer 5 · 2018-01-27T01:42:27.000Z

@Matt-F-Wu Did you remember to add the obj extension to your app.json https://github.com/expo/expo-three/tree/master/examples/loader#expo-three-loader-example

Answer 6 · 2018-01-27T01:47:31.000Z

Wow, thank you for prompt response. I did add the extensions to app.json however.

I believe the error is because I passed loadAsync() an asset instead of just a url:

Asset.fromModule(require('../assets/objects/low-poly-chest.obj'));

Using url makes the error disappear :-) Thank you!

Answer 7 · 2018-01-27T01:49:17.000Z

Yay! It's been a long week but I feel like 2.2.1 may support Assets as well

Answer 8 · 2018-01-27T02:29:10.000Z

Thanks Evan, I am not in a hurry so feel free to come back to this question next week:

const chest = {
      'obj': require('../assets/objects/low-poly-chest.obj'),
      'mtl': require('../assets/objects/low-poly-chest.mtl'),
      'png': require('../assets/objects/low-poly-chest.png'),
    };

    /// Load chest!
    const assetProvider = (name) => {
      return chest[name];
    };
    const chestObj = await ExpoTHREE.loadAsync(
      [chest['obj'], chest['mtl']],
      null,
      assetProvider,
    );

The assetProvider is causing some error, taking it out will solve it but the png material will be gone.

ExpoTHREE.loadAsync: Cannot parse undefined assets. Please pass valid resources for: undefined."

__expoConsoleLog
    C:\Users\haoha\quest\node_modules\expo\src\logs\RemoteConsole.js:98:8
error
    C:\Users\haoha\quest\node_modules\react-native\Libraries\ReactNative\YellowBox.js:71:16
loadAsync$
    C:\Users\haoha\quest\node_modules\expo-three\lib\loadAsync.js:10:4
tryCatch
    C:\Users\haoha\quest\node_modules\regenerator-runtime\runtime.js:63:44
invoke
    C:\Users\haoha\quest\node_modules\regenerator-runtime\runtime.js:337:30
tryCatch
    C:\Users\haoha\quest\node_modules\regenerator-runtime\runtime.js:63:44

Thanks again for your help, have a nice weekend!

Answer 9 · 2018-01-27T02:32:11.000Z

Could you share a snack possibly? Also is the image name in the mtl "png"? Maybe it's asking for an image with a different name and the asset provider is returning an item from the object that doesn't exist

Answer 10 · 2018-01-27T02:39:28.000Z

Omg, nope. The name is low-poly-chest.png, I see what happened now, stupid mistake, sorry.

Answer 11 · 2018-01-27T03:24:08.000Z

The error went away but somehow the object is all black, I made a snack here: https://snack.expo.io/SJxikuKHG

I used the same 3D files as the example here: https://snack.expo.io/@bacon/load-simple-obj-model

I also tried setting the material of the mesh to color red, but it still showed up black:
chestObj.material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );

Not sure what I am doing wrong here,
Thanks a bunch!

Answer 12 · 2018-01-27T04:08:01.000Z

man, you scared me. We are having some framebuffer issues in this version and I thought your material bug was related. Luckily it's not! So for some reason I can't even begin to fathom, .mtl files fail to download in Expo. So I wrote a thing into expo-three that downloads from FileSystem instead. You'll need to upgrade to a new version tho: 2.2.2-alpha.0 💙

Answer 13 · 2018-01-28T00:49:16.000Z

Hi Evan, I tried the new version but there is something strange here:

`ExpoTHREE.loadAsync: OMG, this asset couldn't be downloaded! Open an issue on GitHub...

node_modules\react-native\Libraries\ReactNative\YellowBox.js:71:16 in error
node_modules\expo-three\lib\loadAsync.js:19:4 in loadAsync$
node_modules\regenerator-runtime\runtime.js:63:44 in tryCatch
node_modules\regenerator-runtime\runtime.js:337:30 in invoke
node_modules\regenerator-runtime\runtime.js:63:44 in tryCatch`

And this happens only with obj/mtl files that I added this morning, the files that I added last night with the older version 2.2.0 doesn't report this issue (Although they still show up as black).

I am also trying to look at how assetProvider is used (since it is the only function that will return my png file), and seems like it will only be used like: loader.setPath(assetProvider); given the way I called loadAsync with first argument being [obj_file, mtl_file], is this intended?

I feel kinda bad that I am pestering you with these issues, but thank you very much!

Answer 14 · 2018-01-28T00:59:54.000Z

ExpoTHREE.loadAsync: OMG, this asset couldn't be downloaded! Open an issue on GitHub...
I added this error last night to catch assets that couldn't be downloaded.

yeah, loader.setPath is a hack I'm using to work with all the three.js loaders.

given the way I called loadAsync with first argument being [obj_file, mtl_file], is this intended?

Yeah you could call it in any order.

Questions

Does this only happen in snack
What device are you using
Could you provide source code
Does your material have ambient values? (Ka in the mtl file)

Answer 15 · 2018-01-28T01:49:04.000Z

Hi Evan,

This happens on my windows 10 machine that I use to write my code
The app is downloaded to my iPhone 6s
https://github.com/Matt-F-Wu/quest is my github repo, the file that has all the code in is: https://github.com/Matt-F-Wu/quest/blob/master/screens/CameraNav.js
It has ambient values, there is Ka in the mtl file

Thanks a bunch!

Answer 16 · 2018-01-29T05:01:44.000Z

@Matt-F-Wu There is a lot of private stuff here, I got the code and I'll look at it now, I would recommend adding a .gitignore to hide your .p12 and add a secret.js with the GMaps api key in it

Answer 17 · 2018-01-29T06:45:01.000Z

@Matt-F-Wu the problem is your chest model is corrupted, I've tried exporting and loading as dae, json, object, none worked to load the texture. When I load into mesh lab I see the following error with the model:

Warning: invalid framebuffer operation

I think you should try rebuilding the mesh / cleaning it up. Then everything should work!

Answer 18 · 2018-01-29T07:05:14.000Z

@EvanBacon Thanks a bunch Evan!
What tool did you use to generate the obj/mtl/png files? I just downloaded from Clara.io, and it looked fine on my PC with "print 3D", but I guess that's probably not right.

Answer 19 · 2018-01-29T07:06:17.000Z

I use MeshLab to view things, and blender to export and stuff

Answer 20 · 2018-01-29T07:06:44.000Z

Awesome, thank you! I will use blender from now on :-)

Answer 21 · 2018-02-02T21:20:48.000Z

Hi Evan, I'm also having trouble getting a .obj + .mtl to display properly using ExpoTHREE.loadAsync(). It's currently displaying as a black object.

I've added "mtl" and "obj" to the appExts of app.json per the above. Here's the code I'm using below:

import Expo, { Asset } from 'expo'
import React, { Component } from 'react'
import { PanResponder} from 'react-native'
import { connect } from 'react-redux'

const THREE = require('three') // Supported builtin module
import ExpoTHREE from 'expo-three'
console.disableYellowBox = true

const scaleLongestSideToSize = (mesh, size) => {
  const { x: width, y: height, z: depth } =
    new THREE.Box3().setFromObject(mesh).size()
  const longest = Math.max(width, Math.max(height, depth))
  const scale = size / longest
  mesh.scale.set(scale, scale, scale)
}

class AR extends Component {

  constructor () {
    super()

    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onStartShouldSetPanResponderCapture: () => true,
      onMoveShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponderCapture: () => true,
      onPanResponderRelease: this._handlePanResponderRelease.bind(this)
    })

    this.state = {
      loaded: false,
    }
  }

  // React Native Touch event responders
  _handlePanResponderRelease = () => {
    this.props.navigation.goBack()
  }

  // ARKit/Three.js functions
  _onGLContextCreate = async (gl) => {
    // Create AR Session
    const arSession = await this._glView.startARSessionAsync()

    // Overwrite Three.js camera with ARKit camera
    const camera = ExpoTHREE.createARCamera(
      arSession,
      gl.drawingBufferWidth,
      gl.drawingBufferHeight,
      0.01,
      1000
    )

    // Configure the renderer
    const renderer = ExpoTHREE.createRenderer({ gl })
    const { drawingBufferWidth: width, drawingBufferHeight: height} = gl
    renderer.setSize(width, height)

    // Create the scene and set its background to device camera's live video feed
    const scene = new THREE.Scene()
    scene.background = ExpoTHREE.createARBackgroundTexture(arSession, renderer)

    // Render model
    const loadModelsAsync = async () => {
      /// Get all the files in the mesh
      const model = {
        'orange.obj': require('../assets/orange/orange.obj'),
        'orange.mtl': require('../assets/orange/orange.mtl')
      }

      /// Load model!
      const mesh = await ExpoTHREE.loadAsync(
        [
          model['orange.obj'],
          model['orange.mtl']
        ],
        null,
        name => model[name],
      )

      /// Update size and position
      ExpoTHREE.utils.scaleLongestSideToSize(mesh, 0.9)
      ExpoTHREE.utils.alignMesh(mesh, { y: 1 })
      /// Smooth mesh
      // ExpoTHREE.utils.computeMeshNormals(mesh)

      /// Add the mesh to the scene
      const { x: xFromScreen, y: yFromScreen, z: zFromScreen } = camera.getWorldPosition()
      mesh.position.set(xFromScreen, yFromScreen, zFromScreen - 2)
      scene.add(mesh)
      this.mesh = mesh
    }

    await loadModelsAsync()

    // Define frame animation behavior and begin animation loop
    const animate = () => {
      requestAnimationFrame(animate)

      this.mesh.rotation.y += 0.1

      renderer.render(scene, camera)
      gl.endFrameEXP()
    }
    animate()

  }

  render () {
    return (
      <Expo.GLView
        {...this._panResponder.panHandlers}
        ref={ref => this._glView = ref}
        style={styles.container}
        onContextCreate={this._onGLContextCreate}
      />
    )
  }
}

const styles = {
  container: {
    flex: 1,
    justifyContent: 'center'
  },
  textTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#6c5ce7',
    textAlign: 'center'
  }
}

export default connect()(AR)

I get the following warning (error?) in the XDE when loading the .mtl:

Oh No! Evan screwed something up!! You tried to download an Expo.Asset and for some reason it didn't cache... Known reasons are: it's an .mtl file 3:55:11 PM Load local file file:///var/mobile/Containers/Data/Application/C808A17B-B4D5-407C-954F-F88DF4E4141A/Library/Caches/ExponentExperienceData/%2540allenhj%252Fnot-seek/ExponentAsset-3661710ad895f81034d9ef6c1eb2adea.mtl 3:55:11 PM loadAsset: 3.717ms 3:55:11 PM Load local file file:///var/mobile/Containers/Data/Application/C808A17B-B4D5-407C-954F-F88DF4E4141A/Library/Caches/ExponentExperienceData/%2540allenhj%252Fnot-seek/ExponentAsset-32af9473699e63cff63822fbff24b831.obj

I've tried opening this and other .objs in MeshLab (which I just downloaded) and get the following error for basically any .obj I try opening: "Warning: There are gl errors: invalid framebuffer operation."

Any help you might provide would be very much appreciated.

Answer 22 · 2018-02-02T21:44:37.000Z

@AllenHJ Could you please share the actual snack, with the models included. You can DM me on slack if that is more secure for you: @Bacon https://slack.expo.io/

Answer 23 · 2018-03-01T09:16:46.000Z

@AllenHJ @EvanBacon Did you guys manage to solve this issue? I am hitting this issue too somehow.

Answer 24 · 2018-10-23T08:31:01.000Z

@EvanBacon I apologize for necro posting, just seemed like the proper issue to ask this. Calling loadAsync should work for FBX files as well(as long as they are added to assetExts)?