主页 / 问题 / 1437875
Accepted
Vint Planov
Asked:2022-08-10 01:34:17 +0000 UTC2022-08-10 01:34:17 +0000 UTC

React Three js Fiber没有从链接加载纹理

  • 772

如何从链接加载纹理 - 没有 React 导入？任务是：制作一个圆圈，其中会有一张从后端链接中拍摄的人的照片......

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>
    );
};

reactjs three.js

1 个回答

  1. Best Answer
    1. 照片导入是必要的，因为 React 会生成自己的图像链接。
    2. 谷歌被 cors 政策阻止，所以图像没有加载。

    由于第 1 点，此类路径“./../../../assets/images/”不起作用。您需要自己的服务器，例如在 express 节点 js 上

    1. npm 我表达

    2. 使用以下代码添加 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');
});

    1. 我们与 React 分开启动服务器：node server.js

    2. 添加到 package.json ：“代理”

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

    1. 会给出图片：

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

    • 0

相关问题