如何在网页中渲染 Blender 模型?
How to render a Blender Model in a web page?
所以我探索了在我的网络应用程序中渲染我的搅拌机模型的多种选择,现在我将我的模型导出为 .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
问题
GLTF 加载程序抛出错误
我想要什么
- 我想渲染我的模型,因为它在 React 应用程序的搅拌机中显示为
尽我所能
- 旋转控件会很棒..
抛出错误
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.
所以我探索了在我的网络应用程序中渲染我的搅拌机模型的多种选择,现在我将我的模型导出为 .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
问题
GLTF 加载程序抛出错误
我想要什么
- 我想渲染我的模型,因为它在 React 应用程序的搅拌机中显示为 尽我所能
- 旋转控件会很棒..
抛出错误
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.