如何在网页中渲染 Blender 模型？答案

【问题标题】：How to render a Blender Model in a web page?如何在网页中渲染 Blender 模型？
【发布时间】：2020-11-17 16:40:23
【问题描述】：

所以我探索了多种关于在我的网络应用程序中渲染搅拌机模型的选项，现在我将我的模型导出为.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 加载器抛出错误

我想要什么

我想渲染我的模型，因为它在反应应用程序的搅拌器中显示为尽我所能
旋转控件会很棒..

抛出错误

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

【问题讨论】：

标签： javascript reactjs three.js blender react-three-fiber

【解决方案1】：

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

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

【讨论】：

您能解释一下为什么draco-gltf 目录存在于公用文件夹中吗？及其重要性？
Draco 是 gltf 的压缩扩展，它可以为您节省大量带宽。您可以在搅拌机本身中进行压缩，也可以使用 gltf-pipeline 之类的工具。一旦你这样做了，你必须提供 draco 二进制文件，否则它将无法加载 gltf。如果你不压缩你就不需要它。