Question

我一直在努力寻找一种基本上代表格拉菲蒂墙的方法，而且找不到任何方向指针。我的第一个假设是我需要做一些自定义纹理，但我真的无法弄明白; idk如果是因为我已经烧坏了，或者是什么，但我想不出用三种方式来做这件事。

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

有关详细信息，请使用“像这样”，我的意思是将给定的位图画笔应用于CubeGeometry中的材质顶部。

Answer 1

我知道它有点老了，但我最近一直在搞乱这个问题，我想我找到了办法。

创建画布，然后使用该画布创建纹理。之后，使用任何代码HERE。对于普通表面，它应该可以正常工作，但是对于球体或非规则形状来说它有点棘手。

应该是这样的：

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

不确定它是否有效，但这是一种方法。

使用three.js，我如何在立方体上徒手画画？

1 个答案: