N
N
Nefedov562021-06-27 21:48:45
three.js
Nefedov56, 2021-06-27 21:48:45

Why is the texture not applied to the model in react-native?

Good evening. Stack: react-native + expo + three.js
Problem: I load the model, the model is loaded, but the texture is not applied to the model.
Maybe someone has ideas? or for example some other technologies similar to threejs

import { GLView } from 'expo-gl';
import { Renderer } from 'expo-three';
import * as React from 'react';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import {
  AmbientLight,
  Fog,
  PerspectiveCamera,
  PointLight,
  Scene
} from 'three';
import { Asset } from 'expo-asset';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
import OrbitControlsView from 'expo-three-orbit-controls';

export default function App() {
  let timeout;
  const [camera, setCamera] = React.useState(null);

  React.useEffect(() => {
    return () => clearTimeout(timeout);
  }, []);
  const _onContextCreate = async (gl) => {
    const { drawingBufferWidth: width, drawingBufferHeight: height } = gl;
    const sceneColor = '#263238';

    const renderer = new Renderer({ gl });
    renderer.setSize(width, height);
    renderer.setClearColor(sceneColor);

    const camera = new PerspectiveCamera(50, width / height, 0.02, 1000);
    camera.position.set(0, 0, 3);
  
    setCamera(camera);

    const scene = new Scene();
    scene.fog = new Fog(sceneColor, 1, 10000);
  
    
    const ambientLight = new AmbientLight(0x101010);
    scene.add(ambientLight);

    const pointLight = new PointLight(0xffffff, 1, 300, 0.1);
    pointLight.position.set(0, 200, 200);
    scene.add(pointLight);
    const pointLight2 = new PointLight(0xffffff, 1, 600, 0.1);
    pointLight2.position.set(0, -50, -500);
    scene.add(pointLight2);

    const asset = Asset.fromModule(model['man.obj']);
    await asset.downloadAsync();

    const materialAsset = Asset.fromModule(model['man.jpg']);
    await materialAsset.downloadAsync();

    await Asset.loadAsync([
      model['man.jpg'],
    ]);

    const objectLoader = new OBJLoader();
    const materialLoader = new MTLLoader();

    materialLoader.setResourcePath('/model/');
    console.log(materialAsset.uri)
    const material = await materialLoader.loadAsync(materialAsset.uri);
    material.preload();

    objectLoader.setMaterials(material);
 
    const object = await objectLoader.loadAsync(asset.uri);
    object.position.set(0, 0, 0);

    object.scale.set(0.0031, 0.0031, 0.0031);

    scene.add(object);

    camera.lookAt(object.position);

    const render = () => {
      timeout = requestAnimationFrame(render);
      renderer.render(scene, camera);
      gl.endFrameEXP();
    };

    render();
  }

  return (
    <OrbitControlsView style={{ flex: 1 }} camera={camera}>
      <GLView
        style={{ flex: 1 }}
        onContextCreate={_onContextCreate}
        
      />
    </OrbitControlsView>
  );
}

const model = {
  'man.obj': require('./model/man.obj'),
  'man.jpg': require('./model/man.jpg'),
};

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question