带有 React、THREE、Parcel 和 react-three-fiber 的 OBJLoader答案

【问题标题】：OBJLoader with React, THREE, Parcel and react-three-fiber带有 React、THREE、Parcel 和 react-three-fiber 的 OBJLoader
【发布时间】：2019-10-27 08:12:16
【问题描述】：

警告这不是three.js OBJLoader not loading in react 的副本。 react-three-renderer 已弃用，我在这里使用功能组件。

我需要加载一个.obj 文件，但出现了两个问题。首先，它通过 react-three-fiber 抛出 TypeError: instance is undefined。其次，它将.obj 加载为HTML：Error: THREE.OBJLoader: Unexpected line: "<!DOCTYPE html>"。

这些问题与 Parcel、THREE 或 react-three-fiber 有关吗？

这是不起作用的代码：

App.js

import React from 'react'
import { render } from 'react-dom'
import { Canvas } from 'react-three-fiber'
import Model from '/Model'
import Controls from '/Controls'
import '/style.css'

const App = () => {
  return (
    <main>
      <Canvas>
        <Model url="demo.obj" />
        <Controls />
      </Canvas>
    </main>
  )
}

render(<App />, document.getElementById('app'))

Controls.js

import React, { useRef } from 'react'
import { useThree, useRender, extend } from 'react-three-fiber'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

extend({ OrbitControls })

const Controls = props => {
  const { camera } = useThree()
    const controls = useRef()

    useRender(({ camera }) => {
        controls.current && controls.current.update()
        camera.updateMatrixWorld()
    })
  return <orbitControls ref={controls} args={[camera]} {...props} />
}

export default Controls

Model.js

import React, { useRef, useMemo } from 'react'
import { Math as THREEMath } from 'three'
import { useRender } from 'react-three-fiber'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'

const Model = ({ url }) => {
    const model = useRef()
  let rot = 0

  const obj = useMemo(() => new OBJLoader().load(url), [url])

    useRender(() => {
        const rad = 5 * Math.sin(THREEMath.degToRad(rot += 0.3))
        model.current.rotation.set(rad, rad, 0)
  })
    return <primitive object={obj} ref={model} />
}

export default Model

OBJ File here

【问题讨论】：

你确定你用一个 s3 url 作为前缀吗？我忘了从 s3 加载它。或者也许从您的公共文件夹而不是本地加载它
if (!obj) { return null }

标签： javascript reactjs three.js

【解决方案1】：

路径错误。 doctype 的东西是它拉的 404 页面。从 r3f 3 开始，您可以使用 useLoader 钩子，因为它基于 react suspense，因此可以更轻松地处理错误，因此您可以将其包装到错误边界和回退中。

【讨论】：