So i have explored multiple options about rendering my blender models in my web app, Right now i am exporting my model as a .gltf format and here is my code
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 loader is throwing an error
What i want
- I want to render my model as it is shown in blender in a react app as simply as i can
- Rotation controls would be great..
Error thrown
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