How to render a Blender Model in a web page?

Viewed 1537

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
1 Answers

that's not how it works. r3f is a react renderer. react-dom renders divs and spans, r3f renders meshes and materials. you can mix the two renderers just fine, but you can't dump divs into r3f, or meshes into react-dom.

https://codesandbox.io/s/r3f-contact-shadow-c75jh

Related