Three.js旋转纹理

Jay*_*tti 8 three.js

我有一个纹理应用于网格我可以改变偏移量

mesh.material.map.offset.set
Run Code Online (Sandbox Code Playgroud)

我可以改变缩放比例

mesh.material.repeat.set
Run Code Online (Sandbox Code Playgroud)

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

例:

由此:

在此输入图像描述

对此

在此输入图像描述

谢谢.

yom*_*tsu 16

使用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 );
}
Run Code Online (Sandbox Code Playgroud)