Question

我正在尝试将纹理应用于react-three-renderer中的3d对象。纹理似乎正确加载，但当它应用于对象时，它似乎只是从图像中读取单个像素，因此整个对象是单一颜色。这就是我的渲染方法对于对象的样子：

render: function () {
this.props.member.geometry.transformationMatrix.decompose(
  this._internals.position,
  this._internals.rotation,
  this._internals.scale);

return <object3D ref={_.set.bind(this, this, 'rootObject')}>
  <mesh
    position={this._internals.position}
    quaternion={this._internals.rotation}
    scale={this._internals.scale}
    name={_.uniqueId('member-')}
    ref={_.set.bind(this, this, 'mesh')}>
    <geometry
      vertices={this.props.member.geometry.vertices}
      faces={this.props.member.geometry.faces}/>
    <meshBasicMaterial>
        <texture
          url='assets/flag.png'
        />
    </meshBasicMaterial>
  </mesh>
</object3D>
}

我用于旗帜的图片是：https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Vertical_United_States_Flag.svg/2000px-Vertical_United_States_Flag.svg.png

我尝试了不同的图像，它们似乎正在读取图像的左下角像素，因此标志图像使我的3d对象变红。

我的控制台输出显示：

THREE.XHRLoader: HTTP Status 0 received.
lib.js:667 THREE.WebGLRenderer: image is not power of two (2000x3800). Resized to 2048x4096 <img src="blob:file%3A///d6c9cae3-aa01-4c8d-b409-4c7b7ccb27d0">
lib.js:667 THREE.WebGLRenderer: image is not power of two (2000x3800). Resized to 2048x4096 <img src="blob:file%3A///252c94cb-2de1-4b80-8e52-1d1f4b3670b4">
lib.js:667 THREE.WebGLRenderer: image is not power of two (2000x3800). Resized to 2048x4096 <img src="blob:file%3A///84bdac61-7922-4415-8b18-e7342c98bcf1">
lib.js:667 THREE.WebGLRenderer: image is not power of two (2000x3800). Resized to 2048x4096 <img src="blob:file%3A///816d95cc-d2f2-45b0-b23c-44f90eda4fb4">
lib.js:667 THREE.WebGLRenderer: image is not power of two (2000x3800). Resized to 2048x4096 <img src="blob:file%3A///3409d1b1-8b1b-48bf-a50e-ed12a3a938df">
lib.js:667 THREE.WebGLRenderer: image is not power of two (2000x3800). Resized to 2048x4096 <img src="blob:file%3A///9ea60ad1-42a1-4bd5-a149-7a87771fad8c">

有没有理由这样做？我对three.js的经验很少，所以我甚至不知道从哪里开始寻找。它可能是我的渲染器的设置还是其他的东西？

纹理在three.js中加载为纯色

0 个答案: