CODEWITHSUNDEEP
three.js
Purrell
Purrell

Reputation: 12871

Dynamic text or texture on curved object

I'm a newcomer to three.js and am looking for what approaches are possible to achieve an effect like this:

For a cola can like object as in the image below (minus condensation), I want to change independent bits of text on the surface of the can based on user interaction. The variants of text are fairly arbitrary, too many for pre-baked full can textures. For instance I might want to:

I'm sure it's possible, just looking for what concepts I need to employ. Is it difficult to have multiple textures on the same object? Or to generate arbitrary text and position it on an object and wrap it to the shape of the object?

Any pointers helpful!

enter image description here

Upvotes: 0

Views: 1760

Answers (1)

yaku
yaku

Reputation: 3111

You can use image created in a separate canvas as a Three.js texture. Instead of trying to mix and blend multiple textures in Three.js (possible, but tricky and limited control), I think the best solution would be to create the dynamic texture in 2D, totally out of Three.js then just apply the full texture to the can.

You can create your canvas image manually or using canvas image manipulation library of your choice (some possibilities: https://docs.google.com/spreadsheet/ccc?key=0Aqj_mVmuz3Y8dHNhUVFDYlRaaXlyX0xYSTVnalV5ZlE#gid=0 ). Or you can have your template as SVG and modify that (should be quite simple), render that to canvas, then use it as texture.

Using canvas as a texture is very simple: 

var canvas = document.createElement('canvas');
    canvas.width = 512;
    canvas.height = 512;
var context = canvas.getContext('2d');

  // drawing something here....

  context.font = "Bold 20px Helvetica";
  context.lineWidth = 4;
  context.strokeStyle = 'rgba(255,255,255,.8)';
  context.fillStyle = "rgba(0,0,0,1)";
  context.strokeText("Testing", 4, 22);
  context.fillText("Testing", 4, 22);    

var texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;

Upvotes: 2

Related Questions