reactjs - 通过 react-three-fibre 中的 Prop 传递纹理的 URL

Question

我最近开始使用 react-three-fibre，我发现了 this example svg 图像是通过组件而不是直接在函数中加载的。我想使用这个想法，因为我想重用相同的组件但实现不同的 url 来加载不同的纹理。

我试图复制这个例子所做的，但它一直出现错误:无法获取/undefined这是我的代码:

import * as THREE from "three";
import ReactDOM from 'react-dom'
import React, { Suspense, useState, useRef, useEffect, useMemo } from 'react'
import { Canvas, extend, useLoader, useThree, useFrame } from 'react-three-fiber'



function Box(props, {url}) {
    const [texture] = useLoader(THREE.TextureLoader, url);

    const mesh = useRef()


    const [hover, setHover] = useState(false)


    return (

      <mesh
        {...props}
        ref={mesh}
        castShadow
        rotation={props.rotation} 
        scale={hover ? [1.2, 1, 1.2] : [1, 1, 1]}

        onPointerOver={e => setHover(true)}
        onPointerOut={e => setHover(false)}>

        <boxBufferGeometry attach="geometry" args={[130,.1,120]} />
        <meshStandardMaterial attach="material" map = {texture} transparent = {true} />
      </mesh>

    )
  }


function App() {
  return (
    <Canvas camera={{ position: [5,300,0],  
        fov:60, 
        aspect: window.innerWidth / window.innerHeight, 
        near:1, 
        far: 1000 }}>
        <Suspense fallback={null}>

            <Box position={[150, 10, -340]} rotation = {[0, Math.PI/2,0]} url = {['../../URL']}/>
            <Box position={[0, 0, 0]} />

      </Suspense>

       <directionalLight position = {[1,1,1]} intensity = {[1.7]}/>
    </Canvas>
  )
}


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

我也尝试通过 props.url 传递 url 而不是仅使用 url 但这也有类似的错误，我不知道如何纠正这个。我查看了文档 here对于 react-three-fiber 似乎这只适用于其他装载机？例如 Draco 或 GLTF。但我不知道为什么它对 TextureLoader 不起作用。

编辑:完整错误:

所以这不是最有用的错误，因为它创建了一个单独的 html 页面，说明它无法获取/未定义。它确实与传递 url 有关，因为如果我直接在函数内实现完整的 url，一切正常。但我不想创建这么多不同的功能。我看了here与有类似错误的人一起，它暗示也许 Javascript 已将我的 src 设置为未定义？但它不应该，因为如果 url 不通过 Prop 传递，它工作得很好。所以我猜我的语法有误，但我不知道如何更正它。

Answer 1

这一行似乎是导致问题的原因:

const [texture] = useLoader(THREE.TextureLoader, url);

useLoader将无法读取 url因为它是一个数组，它会将纹理作为一个对象返回，因此将它解构为一个数组是行不通的。

纹理 url 需要保存在 public 中文件夹并访问，但是您可以在您的环境中访问 public。我认为这是 cannot GET 的地方问题源于 - 请求纹理的文件没有对公用文件夹的正确访问权限。

从那里开始，它只是将路径字符串作为 Prop 向下传递的情况，您可以将其作为独立字符串或必要时作为数组的一部分来执行。在我的示例中，这是:

<Box url={["/plainmap.jpg"]} />

要在纹理加载器中访问该字符串，您需要指定索引或使用扩展运算符。

const texture = useLoader(THREE.TextureLoader, ...url);

CodeSandbox