前端验证组件，基于three.js

Andy Will

已于 2023-03-30 12:03:32 修改

阅读量209

点赞数

文章标签： javascript 前端

于 2023-03-22 17:34:25 首次发布

本文链接：https://blog.csdn.net/weixin_51760851/article/details/129669248

版权

文章介绍了一个基于three.js的前端验证组件，提供了演示、安装和使用步骤。用户需要拷贝字体文件到指定目录，然后在HTML中设置div和按钮。通过导入verify-threejs模块并监听按钮点击事件来启动验证。组件支持自定义大小、主题、颜色，并设有成功回调函数。

摘要由CSDN通过智能技术生成

演示

https://svarsity.cn:9999

安装

npm install verify-threejs

使用

1.将路径为node_modules/three/examples/fonts/droid/droid_sans_mono_regular.typeface.json的字体文件拷贝到项目的public/fonts/ 目录下，public中没有fonts文件夹的可以新建一个。
2.在HTML中准备一个div，作为创造容器，一个按钮，控制div的显示

<div id="verify" style="opacity: 0;"></div>
<button id="btn">Click Me</button>

在我们想使用的地方引入

import verify from "verify-threejs";

document.querySelector('#btn').addEventListener('click', () => {
   verify(
       document.querySelector('#verify'), {
           success: () => {
               alert('验证成功')
           },
       }
   );
})

4.参数传递，函数一共可以接收两个参数，第一个参数就是dom元素，也就是最开始准备的div；第二个参数是一个配置对象，下面是第二个参数详细介绍

 {
    sizeRatio: 3,             //缩放比率，用来调节大小，非必填，默认值为3，值为1-4
    theme: 'dark,',           //主题，非必填，默认值为dark，值为dark或light
    insideColor: '#fff',      //验证星空内颜色，非必填，在主题为dark时默认值为#47463f，否则默认值为#bf007e，值为16进制的颜色
    outsideColor: '#000',     //验证星空外颜色，非必填，在主题为dark时默认值为#1b1b21，否则默认值为#5f97c4，值为16进制的颜色
    success: () => {          //成功之后的回调函数，必填项，值为函数
        alert('验证成功')
    }
 }