如何在网页中呈现搅拌机模型？

素材狗 2022-09-06 18:00:01 文章分类：前端实例代码点击数：1次

文章标签

How to render a Blender Model in a web page?(如何在网页中呈现搅拌机模型？)

本文介绍了如何在网页中呈现搅拌机模型？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经研究了在我的Web应用程序中渲染我的搅拌机模型的多个选项，现在我正在将我的模型导出为.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加载器引发错误

我想要的

我希望将我的模型在Reaction应用程序的搅拌器中显示为尽我所能
旋转控制很棒..

抛出错误

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