好的,我遵循了这个教程
现在应用程序工作正常,但当我试图在视图组件中显示它时,问题出现了。
下面是返回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对象。因为我检查了我的自我,没有视图组件它工作得很好。我找不到解决这个问题的方法。
如果我错了,请纠正我。如果有的话,也给我一个解决方案。
注意:我的包很好,当没有被包装在组件中时,它是正常工作的。
我的错,我只是需要给
style={{flex: 1}}
这样的
<View style={{ flex: 1 }}>
<Canvas style={{ flex: 1 }}>
..... anycode ....
</Canvas>
</View>