我开始开发我的项目，其中织物 js 画布用作我的 3d 对象上的纹理，由三个 js 库加载。不幸的是，我现在没有完整的工作 sn-p，也许你可以告诉我解决方案或解决我问题的正确方法
问题是在下部画布上绘制的控件及其在我的 3d 对象上的传输，我想在上部画布上渲染它。可能吗？ 第二个问题是画笔首先呈现在上部画布上，然后在事件“鼠标：向上”后呈现在下部画布上。如何通过事件“鼠标”渲染画笔线；绘制时在下部画布上移动'？
附言对不起我的英语，对我来说真的很难说。希望你能理解我的想法
在这里你可以看到我的第一个问题： https://1drv.ms/u/s!AqtIFlFVWz4MhNtBc3g1DQElfA6_7Q?e=y7ly37
感谢您的回复！
【问题讨论】：
标签： three.js html5-canvas fabricjs
哇！这是一个非常好的代码示例！它也很顺利。它更好地显示了问题。
我在fabric js 演示中找到了第一个问题（类似于three.js 问题）的解决方案：http://fabricjs.com/controls-customization。 我不擅长面料，所以可能有比这更优雅的解决方案。您可以隐藏控件，渲染到 three.js，然后再次显示它们。您还必须强制画布进行渲染，否则将无法正常工作。
function animate() {
requestAnimationFrame(animate);
//find the selected object on the fabric canvas
let selected = canvas.getActiveObject();
//hide controles and render on the fabric canvas;
if (selected){
selected.hasControls = false;
selected.hasBorders = false;
canvas.renderAll();
}
//update texture and render
texture.needsUpdate = true;
renderer.render(scene, camera);
//show controls and render on the fabric canvas
if (selected){
selected.hasControls = true;
selected.hasBorders = true;
canvas.renderAll();
}
}
第二个问题有点难以理解。我不确定“下部帆布”是什么，以及它是否是我不理解的织物的一部分。这是我能得到的最接近的。我几乎让它在 three.js 渲染器上工作。如果我理解正确的话......
你需要有一个变量来知道你是否按下了鼠标。只有当您按下鼠标并移动鼠标时，它才会画一个圆圈。
要对织物“鼠标：移动”做同样的事情，您至少必须禁用织物画布上的选择框。但我不知道这在织物中是如何工作的。
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var mouseDown = false;///////////////////////////// global boolean
var onClickPosition = new THREE.Vector2();
container.addEventListener("mousedown", function(){
mouseDown = true;
canvas.selection = false;
onMouseEvt(); //draw circle
}, false);
container.addEventListener("mouseup", function(){
mouseDown = false
canvas.selection = true;
}, false);
container.addEventListener("mousemove", function(e){
if (mouseDown){
onMouseEvt(); //draw circle
}
}, false);
///This code does not work, it goes into selection mode..
canvas.on('mouse:down', function(){
mouseDown = true;
addCircle();
}, false);
canvas.on('mouse:up', function(){
mouseDown = false;
}, false);
canvas.on('mouse:move', function(){
if ( mouseDown ){
addCircle();
}
}, false);
【讨论】：
这是一个很难回答的问题，它并不是真正的 three.js 的东西，它更多地与 fabric.js 和绘制到画布有关。对象纹理的three.js部分似乎工作正常。
如果我理解正确，您有一个要在其上渲染控件的覆盖画布，但它们也被渲染到实际的纹理画布上？如果您实际上是在纹理上渲染控件；不要那样做：p
应该可以让它按照你想要的方式工作。在https://jsfiddle.net/ 或其他地方发布一个小代码示例会很有帮助。
【讨论】：