Three.js 旋转纹理 [英] Three.js Rotate Texture

问题描述

我有一个纹理应用于网格我可以用

I have a texture applied to a mesh I can change the offset with

mesh.material.map.offset.set

我可以用

mesh.material.repeat.set

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

so my question is, how can I rotate texture inside a plane?

从这里:

为此

谢谢.

推荐答案

使用 2D 画布作为纹理

use 2D canvas as a texture

演示:

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

这篇关于Three.js 旋转纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！