我目前正在尝试在 three.js/canvas 中实现一个绘画类型的应用程序。
我希望能够在 3D 模型上作画,然后更新 UV 贴图。
我尝试了几种不同的方法,在我当前的版本中,我对功能非常满意,但性能很差。
在这个版本中,我正在记录 2D Canvas 描边,一旦鼠标停止绘制 (mouseup),我就会遍历 Canvas 以将每个像素转换到模型上并找到等效的 UV 坐标并使用 fillrect 绘制该特定像素在 UV 贴图上的正确位置。
这确实有效,但必须有更有效的方法,谁能指出我正确的方向?
for (var iy = 0; iy < height; iy++){
for (var ix = 0; ix < width; ix++){
var red = imgData.data[((width * iy) + ix) * 4];
var green = imgData.data[(((width * iy) + ix) * 4) + 1];
var blue = imgData.data[(((width * iy) + ix) * 4) + 2];
var alpha = imgData.data[(((width * iy) + ix) * 4) + 3];
array = getMousePosition( container, ix+300, iy+300);
onClickPosition.fromArray( array );
intersects = getIntersects( onClickPosition, arrayMesh );
if ( intersects.length > 0 ){
var uv = intersects[ 0 ].uv;
intersects[ 0 ].object.material.map.transformUv( uv );
currentPoint = { x: Math.round(uv.x*canvas.width), y: Math.round(uv.y*canvas.height) };
ctx.fillRect(currentPoint.x, currentPoint.y, 1, 1);
}
}
}
最佳答案
听起来您正在写入的纹理是 Canvas (因为您“使用 fillrect 在 UV 贴图上的正确位置绘制特定像素”)。
与其使用 fillrect
成百上千次,我会尝试获取 ImageData直接并自己设置像素。它在单像素写入上多快,因为在更新期间没有函数调用发生。
如果你想变聪明,你可以让鼠标在一个 Canvas 上写字(通常是灰度),然后将划痕 Canvas 投影到你的模型和 UV 贴图上,然后简单地使用它作为一个过滤器来混合油漆颜色(和/或纹理)。这是将图像绘制到模型上的一种非常简单的方法(即,绘制 mask ,然后在添加之前将图像乘以该图像)。
关于javascript - 使用 `fillRect` 绘制 3D 模型太慢?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39733553/