Trying to load obj & mtl file with Three.js

[im-aditya]

Note: This is not an issue with this library but I was hoping I will get an answer here, hence posting it. Main objective : Load animated models exported from Maya into React Native app Exported files : obj, mtl & png file

When I am trying to load the MTL file using the MTLLoader, I am getting following error:

Can't find variable: document

Here are the two files that I am using:

three.js

const THREE = require("three"); global.THREE = THREE; if (!window.addEventListener) window.addEventListener = () => { }; // require("three/examples/js/renderers/Projector"); require("three/examples/js/loaders/MTLLoader"); require("three/examples/js/loaders/OBJLoader"); export default THREE;

ThreeView.js

import React, { Component } from "react"; import { StyleSheet, View } from "react-native"; import { WebGLView } from "react-native-webgl"; import THREE from "./three"; import { image } from "src/res/image";

export default class ThreeView extends Component { requestId: *; componentWillUnmount() { cancelAnimationFrame(this.requestId); } onContextCreate = (gl: WebGLRenderingContext) => { const rngl = gl.getExtension("RN");

    const { drawingBufferWidth: width, drawingBufferHeight: height } = gl;
    const renderer = new THREE.WebGLRenderer({
        canvas: {
            width,
            height,
            style: {},
            addEventListener: () => { },
            removeEventListener: () => { },
            clientHeight: height
        },
        context: gl
    });
    renderer.setSize(width, height);
    renderer.setClearColor(0xffffff, 1);

    let camera, scene;

    function init() {
        camera = new THREE.PerspectiveCamera(75, width / height, 1, 1100);
        camera.position.y = 150;
        camera.position.z = 500;
        scene = new THREE.Scene();

        var mtlLoader = new THREE.MTLLoader();
        mtlLoader.load('female-croupier-2013-03-26.mtl', function (materials) {
            materials.preload();

            var objLoader = new THREE.OBJLoader();
            objLoader.setMaterials(materials);
            objLoader.load('female-croupier-2013-03-26.obj', function (object) {
                scene.add(object);
            }, onLoading, onErrorLoading);
        }, onLoading, onErrorLoading);
    }
    const onLoading = (xhr) => {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    };
    const onErrorLoading = (error) => {
        console.log('An error happened', error);
    };
    const animate = () => {
        this.requestId = requestAnimationFrame(animate);
        renderer.render(scene, camera);

        gl.flush();
        rngl.endFrame();
    };

    init();
    animate();
};
render() {
    return (
        <View style={styles.container}>
            <WebGLView
                style={styles.webglView}
                onContextCreate={this.onContextCreate}
            />
        </View>
    );
}

}

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center" }, webglView: { width: 300, height: 300 } });

[harisanwar64]

Any update? facing same issue.

[gouravjat]

Same here. Any suggestions??

[im-aditya]

Here are some suggestions: https://stackoverflow.com/questions/50190000/trying-to-load-obj-mtl-file-with-three-js-in-react-native

I didn't get the time to try out these suggestions, as for now I switched to UnityView, but I am going to try them soon.