因此,我探索了在网络应用程序中渲染搅拌机模型的多种选项,现在我将模型导出为.gltf
格式,这是我的代码
App.js
import React, { Suspense } from 'react';
import './App.css';
import Model from './Model'
function App() {
return (
<div className="App">
<Suspense fallback={null}>
<Model />
</Suspense>
</div>
);
}
export default App;
Model.js
import React from 'react'
import { useLoader } from 'react-three-fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import Scene from './scene.gltf'
function Model(props) {
const { nodes, materials } = useLoader(GLTFLoader, Scene)
return (
<div>
</div>
)
}
export default Model
Problem
GLTF 加载程序抛出错误
我想要的是
- 我想渲染我的模型,因为它在反应应用程序的搅拌机中显示为
尽我所能
- 旋转控制会很棒..
抛出错误
RangeError: Invalid typed array length: 1299
at new Float32Array (<anonymous>)
at GLTFLoader.js:1965
at async Promise.all (:3000/index 0)
at async Promise.all (:3000/index 0)
at async Promise.all (:3000/index 4)
at async Promise.all (:3000/index 0)
at async Promise.all (:3000/index 2)
at async Promise.all (:3000/index 0)
at async Promise.all
事情不是这样的。 r3f 是一个反应渲染器。 React-dom 渲染 div 和 span,r3f 渲染网格和材质。你可以很好地混合这两个渲染器,但你不能将 div 转储到 r3f 中,或将网格转储到 React-dom 中。
https://codesandbox.io/s/r3f-contact-shadow-c75jh https://codesandbox.io/s/r3f-contact-shadow-c75jh
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)