Передача URL для текстуры через опоры в реагирующем трехволоконном - PullRequest
Новая
       60

Передача URL для текстуры через опоры в реагирующем трехволоконном

0 голосов
/ 02 апреля 2020

Я недавно начал использовать реагирующее три-волокно и обнаружил этот пример , где изображение 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'))

Я также попытался передать URL через props.url вместо использования только url, но это также происходит с похожей ошибкой, и я не знаю, как это исправить. Я просмотрел документы здесь для реагирования с тремя волокнами, и кажется, что это работает только для других загрузчиков? такие как Драко или GLTF. Но я не знаю, почему это не будет работать для TextureLoader.

РЕДАКТИРОВАТЬ: Полная ошибка: enter image description here enter image description here

Так что это не самая полезная ошибка, поскольку она создает отдельный html страница, говорящая, что это не может получить / неопределено. Это как-то связано с передачей URL-адреса, так как, если я напрямую реализую полный URL-адрес внутри функции, все работает нормально. Но я не хочу создавать так много разных функций. Я посмотрел здесь с кем-то с похожей ошибкой, и он предположил, что, возможно, Javascript установил мой sr c на undefined? Но этого не должно быть, поскольку он прекрасно работает, если URL не передается через реквизит. Так что я предполагаю, что мой синтаксис неправильный, но я не знаю, как его исправить.

1 Ответ

1 голос
/ 02 апреля 2020

Похоже, эта строка вызывает проблему:

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

useLoader не сможет прочитать url, так как это массив, и вернет Текстура как объект, поэтому деструктуризация ее как массива не будет работать.

URL-адрес текстуры должен храниться в папке public и доступ к ней возможен, однако вы обращаетесь к publi c в своей среде. Я думаю, что именно здесь возникает проблема cannot GET - файл, запрашивающий текстуру, не имеет правильного доступа к папке publi c.

Оттуда это просто случай передачи строки пути как реквизит, и вы можете сделать это как отдельную строку или как часть массива, если это необходимо. В моем примере это было:

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

Чтобы получить доступ к этой строке в загрузчике текстур, вам нужно указать индекс или использовать оператор распространения.

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

...