React Three js Fiber не грузит тектуры по ссылке

Question

Как загрузить текстуры по ссылке - без импортов Реакт? А задача: сделать круг, в котором будет фото человека, взятое по сслыке с бэкенда...

import React from "react";
import { usePlane } from "@react-three/cannon";
import { useLoader } from "@react-three/fiber";
import { TextureLoader } from "three/src/loaders/TextureLoader";
import gamerPhoto from "./../../../assets/images/profile_pictures/Regular_face_1.png";

const Gamer = ({texture, refGamer}) => {

// Работает, но с импортом мне не надо
const texture = useLoader(TextureLoader, gamerPhoto);

// Не работает Uncaught Could not load ./../../../assets/images/profile_pictures/Regular_face_1.png: undefined
const texture = useLoader(TextureLoader, "./../../../assets/images/profile_pictures/Regular_face_1.png");

// Ни относительно файла, ни относительно reducer, ни просто ссылка, ни прямая http ссылка взятая с гугла (в браузере открывается):
// "./../../../assets/images/profile_pictures/Regular_face_1.png"
// "./../assets/images/profile_pictures/Regular_face_1.png"
// "assets/images/profile_pictures/Regular_face_1.png"
// "https://codeworkshop.dev/static/8a5b2989e06c0d8376faabd9a879dbf9/fcb16/frontendbackend.jpg"

const [refGamer] = usePlane(() => ({
        position: [0, 0, 0],
    }));
  
 
    
    return (
        <mesh ref={refGamer}>
            <circleGeometry args={[1, 35]} />
            <meshStandardMaterial map={texture} />
        </mesh>
    );
};

Answer 1

Импорт фото необходим, потому что Реакт формирует свои ссылки для картинок.
Гугл блокируется политикой cors, поэтому картинка не грузится.

Такие пути "./../../../assets/images/" - не работают по причине п.1. Нужен свой сервер, например на express node js

npm i express
Добавляем файл server.js с кодом:

const express = require('express');

// Порт нужно задать НЕ ТОТ на котором открывается Реакт
const PORT = process.env.PORT || 3001;

const app = express();

// Заменяем 'src/assets/images' на '/media' для картинок
// После этого картинки будут доступны http://localhost:3001/media/* любые подпапки */Regular_face_1.png
app.use('/media', express.static('src/assets/images'));

app.listen(PORT, function() {
  console.log('Example app listening on port 3001!');
});


app.get('/', function(req, res) {
  res.send('Hi');
});

Запускаем, отдельно от реакт, сервер: node server.js
Добавляем в package.json : "proxy"

"name": "test",
"proxy": "http://localhost:3001",
"version": "0.1.0",

Картинка будет отдаваться:

   // Именно на порту 3000! Потому что установлен proxy
const texture = useLoader(TextureLoader, "http://localhost:3000/media/profile_pictures/Regular_face_1.png");

БЛОГ НА HUSL

React Three js Fiber не грузит тектуры по ссылке

Ответы (1 шт):