三.js网格旋转材质答案

【问题标题】：three.js mesh rotate material三.js网格旋转材质
【发布时间】：2017-01-13 13:55:12
【问题描述】：

我想对齐材料，使其看起来像一块木头，而不是几块。 [一块木头][1]

如何旋转纹理/材质来做到这一点。或者我可以将此 object3d 设置为材质而不是每个单独的几何图形吗？

谢谢。

我试过这个，但没有运气！以随机颜色加载图像。

 var material;
 var loader = new THREE.TextureLoader;
 var onLoad = function(_texture) {
  var imgWidth = imgHeight = 128;
  var mapCanvas = document.createElement( 'canvas' );
  mapCanvas.width = mapCanvas.height = 128;

  // document.body.appendChild( mapCanvas );
  var ctx = mapCanvas.getContext( '2d' );
  var img = new Image;
  img.onload = function() {
   ctx.translate( imgWidth / 2, imgHeight / 2 );
   ctx.rotate( Math.PI / 4 );
   ctx.translate( -imgWidth / 2, -imgHeight / 2 );
   ctx.drawImage( img, 0, 0, imgWidth, imgHeight );
  }
  img.src = 'http://remote.plancher2000.com:82/1-2-2-5-Bois.jpg';

  var texture = new THREE.Texture( mapCanvas );
  texture.needsUpdate = true;
  material = new THREE.MeshBasicMaterial({map : texture, side:THREE.DoubleSide});
  material.needsUpdate = true;
 };
 ...
 mesh[no] = new THREE.Mesh( geometry, material ); 
 loader.load(image, onLoad, onProgress, onError);

【问题讨论】：

检查this question，我想这就是你要找的。span>
看起来不错，但我使用的是 TextureLoader() 方法！

标签： three.js rotation

【解决方案1】：

UV 不见了。

function assignUVs(geometry) {
 geometry.faceVertexUvs[0] = [];
 var faceno = 0;

 geometry.faces.forEach(function(face) {
  var components = ['x', 'y', 'z'].sort(function(a, b) {
   var truthy = (Math.abs(face.normal[a]) > Math.abs(face.normal[b]));
   return truthy;
  });
  var v1 = geometry.vertices[face.a];
  var v2 = geometry.vertices[face.b];
  var v3 = geometry.vertices[face.c];
  geometry.faceVertexUvs[0].push([
   new THREE.Vector2(v1[components[0]], v1[components[1]]),
   new THREE.Vector2(v2[components[0]], v2[components[1]]),
   new THREE.Vector2(v3[components[0]], v3[components[1]]),
  ]);
  faceno++;
 });
 geometry.uvsNeedUpdate = true;
}

【讨论】：