3

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

我试图复制这个示例所做的，但它不断出现错误： Cannot GET /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'))

我也尝试通过 urlprops.url而不是使用 just url，但这也带来了类似的错误，我不知道如何纠正这个问题。我在这里查看了 react-three-fiber 的文档，似乎这只适用于其他加载器？例如 Draco 或 GLTF。但我不知道为什么它不适用于 TextureLoader。

编辑：完全错误： 在此处输入图像描述 在此处输入图像描述

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

4

1 回答 1

4

这条线似乎是导致问题的原因：

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

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

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

从那里它只是将路径字符串作为道具向下传递的一种情况，如果需要，您可以将其作为独立字符串或作为数组的一部分来执行。在我的示例中，这是：

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

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

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

代码沙盒

于 2020-04-02T20:24:02.207 回答