在Canvas中使用React Hooks
在本文中，我将使用React Hooks创建一个html canvas 画图网站，我将使用create-react-app脚手架从零开始构建项目。最后这个应用程序有诸如清除、撤销和使用localStorage基本功能。本文我将向您展示任何构建自定义Hooks和在普通的Hooks中重用有状态逻辑。基本设置我们首先使用create-react-app创建一个新的React应用程序。$ npx crea
PIXI.JS 点击获取当前坐标
PIXI Canvas 点击事件如下 onMounted(() => { console.log('mounted') app.renderer.plugins.interaction.on('pointerdown', (event: PIXI.InteractionEvent) => { let ax = event.data.get
学会threejs鼠标交互Raycaster拾取物体
对场景内的模型增加事件监听，实现鼠标交互，须要用到Raycaster（光线投射）类。拾取物体的原理webGL中获取鼠标交互物体的原理：通过三维空间中相机视点与鼠标在屏幕上的地位的连线，造成一条直线，捕捉与此直线相交的空间中的物体，即为交互对象物体。在three中，Raycaster为咱们封装了大量的逻辑代码，包含生成相机到鼠标的射线、射线与空间物体的碰撞检测、射线相交物体深度计算、相交物体列表等等