使用three.js，我该如何徒手绘制多维数据集？

Question

I've been trying for most of today to find a way to basically represent a graffitti wall, and can't find any pointers in that direction. My first assumption was that I'd need to do some kind of custom texture, but I really can't figure it out; idk if it's because I'm burnt out, or what, but I just can't think of a way to do it in three.js terms.

Has any of you had better luck, or knows a way where I could potentially do something like this?

For more details, by "like this" I basically mean applying a given bitmap brush on top of the material in a CubeGeometry.

Answer 1

I know it's a bit old, but I've been messing around with this lately, and I think I found a way to do it.

Create a canvas, then create a texture using that canvas. After that, use any of the codes HERE . It should work pretty ok with plain surfaces, but its kind of tricky with spheres or non-regular shapes.

Should be something like this:

 var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); /* context options here */ var texture = new THREE.Texture(canvas); texture.needsUpdate = true; var graffWall = new.MeshBasicMaterial({ map:texture1 }); mesh.material=material; //or: var mesh = new THREE.Mesh(geometry, material); //and here comes the magic... more or less var wall = document.getElementById('canvas'); var ctx = mesh.material.map.image.getContext('2d'); var ctx = el.getContext('2d'); var isDrawing; wall.onmousedown = function(e) { isDrawing = true; ctx.lineWidth = 10; ctx.lineJoin = ctx.lineCap = 'round'; ctx.moveTo(e.clientX, e.clientY); }; wall.onmousemove = function(e) { if (isDrawing) { ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); } }; wall.onmouseup = function() { isDrawing = false; }; 

not sure if it would work, but it is an approach.