在Three.js中纹理作为纯色加载

最后发布: 2016-07-29 16:00:57


问题

我正在尝试在react-three-renderer中将纹理应用于3d对象。 纹理似乎已正确加载,但是将其应用于对象时,似乎仅从图像中读取单个像素,因此整个对象是单一颜色。 这是我的对象的render方法的外观:

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的经验很少,所以我什至不知道从哪里开始寻找。 可能是我的渲染器的设置还是其他?

javascript reactjs three.js