@Nefedov56

Почему не накладывается текстура на модель в react-native?

Добрый вечер. Стек: react-native + expo + three.js
Проблема: Подгружаю модель, модель загружается, но не накладывается текстура на модель.
Может у кого есть идеи? или например другие какие-то технологии аналогичные 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'),
};
  • Вопрос задан
  • 56 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы