Three.js 旋转纹理答案

【问题标题】：Three.js Rotate TextureThree.js 旋转纹理
【发布时间】：2013-05-19 14:48:18
【问题描述】：

我将纹理应用到网格上，我可以使用

更改偏移量

mesh.material.map.offset.set

我可以使用

更改缩放比例

mesh.material.repeat.set

所以我的问题是，如何在平面内旋转纹理？

示例：

从这里：

到这里

谢谢。

【问题讨论】：

标签： three.js

【解决方案1】：

three.js 没有 UV 编辑实用程序，因此您要么必须手动编辑 geometry.faceVertexUvs，要么在图像编辑程序中旋转图像。我建议后者。

three.js r.58

【讨论】：

那我得摆弄紫外线了。后者违背了我正在构建的目的。

【解决方案2】：

使用 2D 画布作为纹理

演示：

https://dl.dropboxusercontent.com/u/1236764/temp/stackoverflow_20130525/index.html

示例代码

var camera, scene, renderer, mesh;

var width = window.innerWidth;
var height = window.innerHeight;

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera( 30, width / height, 1, 1000 );
camera.position.z = 100;

renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );

var img = new Image();
img.onload = createMeshThenRender;
img.src = 'img.jpg';

function createMeshThenRender () {
    var imgWidth = imgHeight = 256;
    var mapCanvas = document.createElement( 'canvas' );
    mapCanvas.width = mapCanvas.height = 256;

    // document.body.appendChild( mapCanvas );
    var ctx = mapCanvas.getContext( '2d' );
    ctx.translate( imgWidth / 2, imgHeight / 2 );
    ctx.rotate( Math.PI / 4 );
    ctx.translate( -imgWidth / 2, -imgHeight / 2 );
    ctx.drawImage( img, 0, 0, imgWidth, imgHeight );

    var texture = new THREE.Texture( mapCanvas );
    texture.needsUpdate = true;

    mesh = new THREE.Mesh(
        new THREE.PlaneGeometry( 50, 50, 1, 1 ),
        new THREE.MeshBasicMaterial( {
            map : texture
        } )
    );
    scene.add( mesh );
    renderer.render( scene, camera );
}

【讨论】：

这真的很有帮助。直接在画布上旋转/缩放图像比使用图像更容易。

【解决方案3】：

三个.js r85

对于那些希望使用 ShapeBufferGeometry 或 PlaneBufferGeometry 在位于 XY 平面（默认平面）的平面上实际“旋转 UV”的人。

var planeGeo = new THREE.PlaneBufferGeometry(24,24);
var planeMesh = new THREE.Mesh(planeGeo, new THREE.MeshBasicMaterial({map: yourTexture}));
scene.add(planeMesh);
rotateUVonPlanarBufferGeometry(45, planeMesh);

function rotateUVonPlanarBufferGeometry(rotateInDeg, mesh){
  if(rotateInDeg != undefined && mesh){

    var degreeInRad = THREE.Math.degToRad(rotateInDeg);
    var tempGeo = mesh.geometry.clone();
    var geo;

    if(tempGeo instanceof THREE.BufferGeometry){
        geo = new THREE.Geometry().fromBufferGeometry(tempGeo);
    }else{
        console.log('regular geometry currently not supported in this method, but can be if code is modified, so use a buffer geometry');
        return;
    }

    // rotate the geo on Z-axis
    // which will rotate the vertices accordingly
    geo.applyMatrix(new THREE.Matrix4().makeRotationZ(degreeInRad));

    // loop through the vertices which should now have been rotated
    // change the values of UVs based on the new rotated vertices
    var index = 0;
    geo.vertices.forEach(function(v){
      mesh.geometry.attributes.uv.setXY( index, v.x, v.y );
      index++;
    });

    mesh.geometry.attributes.uv.needsUpdate = true;

  }

}

【讨论】：

【解决方案4】：

三个.js r121

在较新版本的three.js中，可以直接设置纹理的旋转和旋转中心。

var texture = new THREE.Texture( ... );
texture.rotation = Math.PI/4;
texture.center = new Vector2d(0.5, 0.5); // center of texture.

【讨论】：

【解决方案5】：

上面的解决方案对我不好，有点老了。这是对我有用的简单解决方案（Three.js 125）

imgData = canvasCtx.getImageData(0, 0, canvasElement.width, canvasElement.height);
texture = new THREE.DataTexture( imgData.data, canvasElement.width, canvasElement.height, THREE.SRGB );
texture.rotation = Math.PI;
texture.center = new THREE.Vector2(0.5, 0.5); // center of texture.
mymaterial = new THREE.MeshBasicMaterial({
                                map: texture,
                                alphaTest: 0.5,
                                transparent: true,
                                side: THREE.DoubleSide,
                            });

【讨论】：