在 React 中将图像添加到框架实体答案

【问题标题】：Adding image to aframe entity in React在 React 中将图像添加到框架实体
【发布时间】：2017-11-17 19:05:54
【问题描述】：

我正在尝试将图像添加到 React 中的 Aframe 实体组件。以下是我如何将图像添加为平面几何上的材质：

<Entity geometry="primitive: plane; width: 30; height: 30" 
                material={{src: "url(assets/image2.jpg)"}}
                position="0 -2 0"
                rotation="-90 0 0">
</Entity>

但是，图像未显示。图像在原始 html 中正确加载，但不适用于 React 和 JSX。

我在控制台中收到以下错误：

components:texture:warn $s 不是有效的视频 +1 资源/image2.jpg

[.Offscreen-For-WebGL-0x7fb65d129a00]渲染警告：绑定到纹理单元 0 的纹理不可渲染。它可能不是 2 的幂并且具有不兼容的纹理过滤。

【问题讨论】：

嗯，我唯一能看到的是图片加载失败。仔细检查路径和您的开发服务器？
如何将动态值传递给材质属性的src？我试过这个材质={{src:'"url('+{this.state.imageUrl}+')"'}} ，但它给出了“this”是保留关键字的错误。 @ngokevin

标签： reactjs image-uploading aframe

【解决方案1】：

材质属性值的正确传递方式可以是
像这样在 render() 方法中声明它

let material = {
            shader: 'flat',
            src : './imagepath.jpg'
        };

然后在你的实体组件中像这样传递

 <Entity  geometry={{primitive: 'sphere', radius: 5000}} material={material}  />

如果一切正常，即使您的图像没有显示，请确保您已将这些全部导入：-

import React from 'react';
import 'aframe';
import 'babel-polyfill';
import {Entity} from 'aframe-react';

【讨论】：