three.js - Three.js 回転テクスチャ

Question

オフセットを変更できるメッシュにテクスチャを適用しています

mesh.material.map.offset.set

でスケーリングを変更できます

mesh.material.repeat.set

だから私の質問は、どうすれば平面内でテクスチャを回転させることができますか?

例：

これから：

これに

ありがとう。

Answer 1

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 );
}

Answer 2

three.js には UV 編集ユーティリティがないため、geometry.faceVertexUvs手動で編集するか、画像編集プログラムで画像を回転させる必要があります。私は後者を提案します。

three.js r.58