0

今日のほとんどの時間、基本的に落書きの壁を表現する方法を見つけようとしてきましたが、その方向への指針を見つけることができません。私の最初の仮定は、ある種のカスタム テクスチャを作成する必要があるというものでしたが、実際にはわかりません。それが燃え尽きてしまったからなのか、それとも何なのかはわかりませんが、three.js 用語でそれを行う方法が思い浮かびません。

運がよかった人、または私がこのようなことを潜在的に行う方法を知っている人はいますか?

詳細については、「このように」とは、基本的に、特定のビットマップ ブラシを CubeGeometry のマテリアルの上に適用することを意味します。

4

1 に答える 1

0

少し古いことはわかっていますが、最近これをいじっていて、それを行う方法を見つけたと思います.

キャンバスを作成し、そのキャンバスを使用してテクスチャを作成します。その後、こちらのいずれかのコードを使用してください。プレーンなサーフェスでは問題なく動作するはずですが、球体や不規則な形状ではややこしいことになります。

次のようになります。

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

それがうまくいくかどうかはわかりませんが、それはアプローチです。

于 2015-07-22T07:07:17.330 に答える