我有一个纹理应用于网格我可以改变偏移量
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)
归档时间: |
|
查看次数: |
9654 次 |
最近记录: |