Answer the question
In order to leave comments, you need to log in
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 questionAsk a Question
731 491 924 answers to any question