javascript - 使用three.js，我将如何在立方体上徒手绘制？

Question

今天大部分时间我一直在尝试找到一种基本上代表涂鸦墙的方法，但找不到任何指向该方向的指针。我的第一个假设是我需要做一些自定义纹理，但我真的想不通；如果是因为我筋疲力尽，或者是什么，我想知道，但我就是想不出用three.js 术语来做到这一点的方法。

你们有没有人有更好的运气，或者知道我可以做这样的事情的方法？

有关更多详细信息，“像这样”基本上是指在 CubeGeometry 中的材质顶部应用给定的位图画笔。

Answer 1

我知道它有点老了，但我最近一直在搞砸，我想我找到了办法。

创建一个画布，然后使用该画布创建一个纹理。之后，使用此处的任何代码。它应该在普通表面上工作得很好，但对于球体或非规则形状来说有点棘手。

应该是这样的：

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

不确定它是否会起作用，但这是一种方法。