主页 / user-495269

Vint Planov's questions

Martin Hope
Vint Planov
Asked: 2022-08-10 01:34:17 +0000 UTC
  • 0

如何从链接加载纹理 - 没有 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
Martin Hope
Vint Planov
Asked: 2022-09-04 18:35:30 +0000 UTC
  • 0

我使用来自.png的背景图像制作了一个图像形式的按钮，带有透明区域。

这些透明区域覆盖了方块的背景： 背景按钮

body {
  background-color: white;
}

.btn {
  outline: none;
  border: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.btn:hover,
.btn:focus {
  box-shadow: inset 0px 0px 8px 1px rgba(63, 84, 112, 0.1);
}

.btn-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  background-color: white;
}

.reduct-btn {
  width: 200px;
  height: 200px;
  /* Не помогает ни transparent ни white */
  background-color: white;
  background-image: url("./img/iconNo.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="styles.css">
  <title>Document</title>
</head>

<body>

  <div class="btn-wrap">
    <button class="btn reduct-btn"></button>
  </div>


</body>

</html>

css background
Martin Hope
Vint Planov
Asked: 2022-06-14 22:00:19 +0000 UTC
  • 1

一个任务！我们从本地文件夹中的 props 中获取到图像的相对链接，我们将 props </View> 中的图像替换为容器组件 <View>

尝试过的选项：

  1. 默认情况下，<Image source={require('')} /> 组件将图片嵌入到应用程序中，但链接不是从props中动态获取的；
  2. < Image source={ {uri : 'http://'} } /> - 不从 assets/ 文件夹中加载，仅从 Internet 加载；
  3. 来自 github github.com/expo/expo-pixi 的 expo-pixi - 无论是通过示例还是通过视频，都无法设置互联网上唯一的 YouTube！除了我，这个世界上没有人需要在 React Native 中处理图片！是的，为图片加载游戏引擎就是这样的事情！

是否有一些简单的东西——比如库/组件——来显示一个简单的 .jpeg 图像？让它比 expo-pixi 图形引擎更容易？- 您无法立即弄清楚...

const Exercise = (props) => {

    return (
        <View style={styles.exercise}>

//////////Не берёт из source={{uri: props.img}}!///////
            <View style={styles.exercise__imgBlock}>
                <Image style={styles.exercise__img} 
                    source={{uri: props.img}} />

////// Или это тоже никак нее работает!/////////
////// Ни по http://, ни по локальным ссылкам /////

                {/* <GLView
                    style={{ flex: 1,  width: '100%', height: '100%' }}
                    onContextCreate={async (context) => {
                        const app = new PIXI.application({ context });
                        const sprite = await PIXI.spriteAsync ( 
                            'https://el-dent.ru/UserFiles/Image/img2484_21094_big.jpg'
                        );
                        
                        app.stage.addChild(sprite);
                    }}
                /> */}
            </View>
            
        </View>
    );
};

const styles = StyleSheet.create({
    exercise: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',

        marginBottom: 10,
        width: '100%',
    },
    exercise__block: {
        width: 30,
        height: 40,
        marginRight: 5,

        borderColor: '#FFC000',
        borderStyle: 'solid',
        borderWidth: 2,
        borderRadius: 10,
    },

    exercise__imgBlock: {
        width: 120,
        height: 80,
        marginRight: 10,
        marginLeft: 20,
        backgroundColor: 'darkgrey',
        borderColor: '#FFC000',
        borderStyle: 'solid',
        borderWidth: 2,
    },
    exercise__img: {
        width: '100%',
        height: '100%',
        // width: 100,
        // height: 100,
        resizeMode: 'contain'
    },

});

react-native expo