如何使用Three.js在对象上绘制一行贴花



如您所见,我有这个例子-用于向对象添加贴花的事件是"pointerrup",如以下函数所示:

window.addEventListener( 'pointerup', function ( event ) {
if ( moved === false ) {
checkIntersection( event.clientX, event.clientY );
if ( intersection.intersects ) shoot();
}
} );

我想知道我怎么能在按下鼠标/指针的时候添加贴花——所以如果我能做到的话——这就像画画一样——这就是我想要实现的。。。

问题是,我不知道我应该使用哪个事件和函数来重复跟踪每个移动并附加它…

问题是我不知道应该使用哪个事件和函数来重复跟踪每个移动并附加它…

您可以通过组合pointerdownpointeruppointermove事件侦听器来执行此操作。使用第一个和第二个来管理布尔变量,例如drawing。在pointerdown上,将其设置为true。在pointerup上,将其设置为false。然后您就知道交互何时处于绘图状态。

pointermove事件侦听器中,检查drawing。如果设置为true,则执行实际的图形逻辑。three.js的官方示例webgl_materials_textracte_canvas演示了此工作流。这个例子的想法是在画布上绘制,画布被用作立方体的纹理。

最新更新