App.js

//works for some NFI reason http://mkumaran.net/blog/2018/03/create-3d-model-in-react-native-using-webgl-and-three-js/

import React, { Component } from "react";

import { Platform, StyleSheet, Text, View } from "react-native";
import { WebGLView } from "react-native-webgl";

import 'react-native-console-time-polyfill';
import THREE from "./three";

//adds window.worker
require('pseudo-worker/polyfill');

//three "plugins"
import "three/examples/js/loaders/LoaderSupport";
import "three/examples/js/controls/OrbitControls";
import "three/examples/js/loaders/MTLLoader";

import "three/examples/js/loaders/OBJLoader2";

THREE.Cache.enabled = true;




import Touches from './Touches';


//import OrbitControls from './orbitcontrols';



console.ignoredYellowBox = [
  'THREE.WebGLRenderer',
  'THREE.WebGLProgram',
];
 
//console.log(document);


class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      text: "Nothing to see here",
      camera: null,
    }

  }
  onContextCreate = (gl) => {
    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, 0);    

    const loadTexture = async function(url, onLoad, onProgress, onError) {
      let textureObject = new THREE.Texture();
      console.log("loading",url,'with fancy texture loader');
      let properties = renderer.properties.get(textureObject);


      var texture = await rngl.loadTexture({yflip: false, image: url});

      /*
      rngl.loadTexture({ image: url })
        .then(({ texture }) => {
        */
          console.log("Texture [" + url + "] Loaded!")
          texture.needsUpdate = true;
          properties.__webglTexture = texture;
          properties.__webglInit = true;
          console.log(texture);
              
          
          if (onLoad !== undefined) {
            //console.warn('loaded tex', texture);
            onLoad(textureObject);
          }
          
  
      //});

    
      return textureObject;
  
  }
  
  THREE.TextureLoader.prototype.load = loadTexture;    
 

 
    let camera, scene, controls;
    let cube;
 
    const init = () => {


      
      
      var mtlLoader = new THREE.MTLLoader();
      var objLoader = new THREE.OBJLoader2();
      var fileLoader = new THREE.FileLoader();
      var fileLoader2 = new THREE.FileLoader()
  
        objLoader.setLogging(true,true);
        objLoader.setModelName( 'WaltHead' );
        objLoader.setUseIndices( true );
        
        
  
      


      camera = new THREE.PerspectiveCamera(75, width / height, 1, 1100);
      controls = new THREE.OrbitControls( camera );

 

      camera.position.set(0,60,100);

      var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
      camera.add( pointLight );


      camera.lookAt(new THREE.Vector3(0,125,0));
      
      controls.update();
      
      
      scene = new THREE.Scene();

      var helper = new THREE.GridHelper( 1200, 60, 0xFF4444, 0x404040 );
	    scene.add( helper );

      var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
      scene.add( ambientLight );

      //objLoader.setPath('https://threejs.org/examples/models/obj/male02/');

      objLoader.loadMtl('https://threejs.org/examples/models/obj/walt/WaltHead.mtl', null, function(materials) { 
    
        console.log(materials);
        objLoader.setMaterials( materials );

    
        
        objLoader.load( 'https://threejs.org/examples/models/obj/walt/WaltHead.obj', function ( event ) {
          console.log("model loaded")
          var local = new THREE.Object3D();


          

          const object = event.detail.loaderRootNode
          object.position.set( 0, 0, 0 );
          //console.log(object);
          scene.add( object);

          console.log(scene.children[0].material);
        }, null, null, null, false );
        //console.log(materials);
        
        //console.log(res);

        //console.log(materials);

      });      
 
      let geometry = new THREE.BoxGeometry(200, 200, 200);
      for (let i = 0; i < geometry.faces.length; i += 2) { 
        let hex = Math.random() * 0xffffff; 
        geometry.faces[i].color.setHex(hex); 
        geometry.faces[i + 1].color.setHex(hex); 
      } 
      let material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors, overdraw: 0.5 }); 
      /*
      cube = new THREE.Mesh(geometry, material); 
      cube.position.y = 150; 
      scene.add(cube); 
      */

      //this.setState({text : "width" + width + " height " + height + "drawing buffer width " + gl.drawingBufferWidth});
      this.setState({camera: camera});
    } 
      
      
      const animate = () => {
        this.requestId = requestAnimationFrame(animate);
        renderer.clear()
        renderer.render(scene, camera);
  
        
        if(cube) {
        cube.rotation.y += 0.05;
        
        cube.rotation.x += 0.02;
        cube.rotation.z += 0.03;
  
      }
        controls.update();

        gl.flush();
        rngl.endFrame();
      };
 
    init();
    animate();
  };
 
  render() {
    return (
      <View style={styles.container}>
        
          <WebGLView style={{ width: 300, height: 300 }} onContextCreate={this.onContextCreate} />
        
        <Text ref={(ref) => this.textBox = ref}>{this.state.text}</Text>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    //backgroundColor: "#F5FCFF"
  },
});

export default Touches(App);