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

因此，我探索了在我的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;

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

import React，{suspend}来自'React'；
导入“/App.css”；
从“./Model”导入模型
函数App（）{
返回(
);
}
导出默认应用程序；

Model.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;

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

从“React”导入React
从“react three fiber”导入{useLoader}
从'three/examples/jsm/loaders/GLTFLoader'导入{GLTFLoader}
从“./Scene.gltf”导入场景
功能模型（道具）{
const{nodes，materials}=useLoader（GLTFLoader，Scene）
返回(
)
}
导出默认模型

问题

GLTF加载程序正在抛出错误

我想要什么

• 我想渲染我的模型，就像它在react应用程序的blender中显示的那样 尽我所能
• 旋转控制会很好

抛出错误

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

RangeError:无效的类型化数组长度：1299
在新的Float32Array（）上
在GLTFLoader.js:1965
at async Promise.all（：3000/索引0）
at async Promise.all（：3000/索引0）
at async Promise.all（：3000/索引4）
at async Promise.all（：3000/索引0）
at async Promise.all（：3000/索引2）
at async Promise.all（：3000/索引0）
至少异步承诺

它不是这样工作的。r3f是一个react渲染器。反应dom渲染div和span，r3f渲染网格和材质。可以很好地混合两个渲染器，但不能将div转储到r3f中，也不能将网格转储到react dom中

---

您能解释一下为什么公共文件夹中存在

draco gltf

目录吗？它的重要性呢？Draco是gltf的压缩扩展，它为您节省了大量带宽。您可以在blender中进行压缩，也可以使用gltf管道等工具。一旦你这样做了，你必须提供draco二进制文件，否则它将无法加载gltf。如果你不压缩，你就不需要它。