Three.js Rotate Texture

by

use 2D canvas as a texture

demo:

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

example code

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="https://stackoverflow.com/questions/16727547/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 );
}

More Related Contents:

  1. How to change the zOrder of object with Threejs?
  2. Transparent objects in Threejs
  3. Mouse / Canvas X, Y to Three.js World X, Y, Z
  4. How does the calculation of the light model work in a shader program?
  5. Transparent objects in Three.js
  6. Three.js Collada – What’s the proper way to dispose() and release memory (garbage collection)?
  7. Display wireframe and solid color
  8. artifacts when rendering both sides of a transparent object with three.js
  9. THREE.JS: Get object size with respect to camera and object position on screen
  10. three.js – Adjusting opacity of individual particles
  11. three.js – how do I rotate a cylinder around a specific point?
  12. Three.js – Can I ‘apply’ position, rotation, and scale to the geometry?
  13. Outline object (normal scale + stencil mask) three.js
  14. How to use multiple materials in a Three.js cube?
  15. How to implement a ShaderToy shader in three.js?
  16. How to get camera position with mouse move event and transform into screen coordinates in three.js? [closed]
  17. Three.js – Width of view
  18. THREE.js : 2xMeshes using same vector as position
  19. Converting 3D position to 2d screen position [r69!]
  20. How to find the unicode of the subscript alphabet?
  21. Changing three.js background to transparent or other color
  22. Converting World coordinates to Screen coordinates in Three.js using Projection
  23. Transparent background with three.js
  24. Multiple transparent textures on the same mesh face in Three.js
  25. How to get the absolute position of a vertex in three.js?
  26. How do you save an image from a Three.js canvas?
  27. Three.JS wireframe material – all polygons vs. just edges
  28. Determine if a mesh is visible on the viewport according to current camera
  29. Texture splatting with Three.js
  30. How to toggle preserveDrawingBuffer in three.js?

Leave a Comment