在博览会管理项目中使用react-three-fiber expo-three等时，如何渲染.obj文件?

Question

好的，我遵循了这个教程

现在应用程序工作正常，但当我试图在视图组件中显示它时，问题出现了。

下面是返回ShoeModel 的代码

import { Canvas, useLoader } from '@react-three/fiber/native';
import { Suspense, useLayoutEffect, useRef } from 'react';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
import { TextureLoader } from 'expo-three';

function Shoe(props) {
const [base, normal, rough] = useAsset(() => [
require('../../../assets/Airmax/textures/BaseColor.jpg'),
require('../../../assets/Airmax/textures/Normal.jpg'),
require('../../../assets/Airmax/textures/Roughness.png'),
]);
const material = useAsset(() => MTLLoader.loadAsync(require('../../../assets/Airmax/shoe.mtl')));
const obj = useLoader(
OBJLoader,
require('../../../assets/Airmax/shoe.obj'),
(loader) => {
material.preload();
loader.setMaterials(material);
}
);
const mesh = useRef();
useLayoutEffect(() => {
obj.traverse((child) => {
if (child instanceof THREE.Mesh) {
child.material.map = base;
child.material.normalMap = normal;
child.material.roughnessMap = rough;
}
});
}, [obj]);
return (
<mesh ref={mesh} rotation={[0.7, 0, 0]}>
<primitive object={obj} scale={10} />
</mesh>
);
}
export default function ShoeModel() {
return (
<Canvas>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<Suspense fallback={null}>
<Shoe />
</Suspense>
</Canvas>
);
}

这里是我称之为

的代码块

import ShoeModel from './components/039/ShoePreview';
export default class ShoeScreen extends React.Component{
render () {
return (
<View>

<ShoeModel />

</View>
);
}
}

现在我的阅读是，画布是不工作在视图组件时加载3d对象。因为我检查了我的自我，没有视图组件它工作得很好。我找不到解决这个问题的方法。

如果我错了，请纠正我。如果有的话，也给我一个解决方案。

注意:我的包很好，当没有被包装在组件中时，它是正常工作的。

Answer 1

我的错，我只是需要给

style={{flex: 1}}

这样的

<View style={{ flex: 1 }}>
<Canvas style={{ flex: 1 }}>
..... anycode ....
</Canvas>
</View>