Three.js Canvas 2D实现六边形密码键盘

hexagon password keyboard，带选中高亮效果（在手机上测试），来自网友ethen的作品。

h5, canvas, keyboard

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1842
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var scene,camera,renderer,stop;
// var _width = 375;
// var _height = 605;
var _width = window.innerWidth;
var _height = window.innerHeight;

function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(45,_width/_height,0.1,1000);

renderer = new THREE.WebGLRenderer({
        alpha:true,
        antialias:true
    });
    renderer.setClearColor(0xFFFFFF,0);
    renderer.setSize(_width,_height);

document.body.appendChild(renderer.domElement);

camera.position.x = 0;
    camera.position.y = 1.5;
    camera.position.z = 30;
    camera.lookAt(new THREE.Vector3(0,1.5,0));

var ambientLight = new THREE.AmbientLight(0xffffff);
    scene.add(ambientLight);

//创建标题
    var tpGeo = new THREE.PlaneGeometry(8,1);
    var ct = document.createElement('canvas');
    ct.width = 512;
    ct.height = 64;
    var ctx = ct.getContext('2d');
    ctx.fillStyle = 'rgba(255,255,255,1)';
    ctx.font = "normal "+ 44 + "px '微软雅黑'";
    ctx.textBaseline = 'middle';
    ctx.textAlign = 'center';
    ctx.fillText('请点按六位密码',512/2,64/2);
    var texture = new THREE.Texture(ct);
    texture.needsUpdate = true;
    var tpMtl = new THREE.MeshBasicMaterial({
        transparent:true,
        map:texture
    });
    var tp = new THREE.Mesh(tpGeo,tpMtl);
    tp.position.y = 11;
    scene.add(tp);

//创建小菱形
    var sHexs = [];
    for(var i=0;i<7;i++){
        var x = (i-3)*1;
        if(x){
            var hexs = smallHex(0.3,new THREE.Vector3(x,8.5,0));
            sHexs.push(hexs);
        }
    }

//创建键盘
    var id = 0;
    var value = Math.sqrt(3)/2;
    for(var i = 0; i < 7; i++){
        var count = i%2==0 ? 7:8;
        for(var j = 0; j < count; j++){
            var x = (i-3)*1.5;
            var pyValue = i%2==0 ? 0:value;//y轴偏移值
            var y = (j-3)*2*value - pyValue;
            var _id = id;
            if(i%2!=0){
                _id = j%2==0 ? id-1:id;
            }
            var type = false;
            if(i%2 == 0 && j%2 == 0){
                type = true;
            }

var type;
            if(i%2 == 0){
                type = false;
                if(j%2 == 0){
                    type = true;
                }
            }else{
                type = false;
                if(j%2 == 0)
                {
                    type = true;
                }
            }

var hex = Hexagon(1,new THREE.Vector3(x,y,0),_id,type);
            // console.log(hex);
        }
        i%2==0 ? id+=2 : id+=1;
    }

//创建横线
    var lineGeo = new THREE.PlaneGeometry(15,0.05);
    var lineMtl = new THREE.MeshBasicMaterial({
        color:0xffffff,
        transparent:true,
        opacity:0.2
    });
    var line = new THREE.Mesh(lineGeo,lineMtl);
    line.position.y = -8;
    scene.add(line);

//创建删除按钮
    var dbGeo = new THREE.PlaneGeometry(6,1);
    var dbct = document.createElement('canvas');
    dbct.width = 384;
    dbct.height = 64;
    ctx = dbct.getContext('2d');
    ctx.fillStyle = '#ffffff';
    ctx.font = "normal "+ 44 + "px '微软雅黑'";
    ctx.textBaseline = 'middle';
    ctx.textAlign = 'center';
    ctx.fillText('删 除',384/2,64/2);
    var dbTexture = new THREE.Texture(dbct);
    dbTexture.needsUpdate = true;
    var dbMtl = new THREE.MeshBasicMaterial({
        transparent:true,
        map:dbTexture,
        opacity:1
    });
    var db = new THREE.Mesh(dbGeo,dbMtl);
    db.name = 'delete';
    db.position.y = -9.3;
    scene.add(db);

//创建忘记密码 96 54
    var fgetGeo = new THREE.PlaneGeometry(2,1);
    var fgetMtl;
    var loader = new THREE.TextureLoader();
    loader.load('./images/iconLock@2x.png',function (res) {
        fgetMtl = new THREE.MeshBasicMaterial({
            map:res,
            transparent:true,
            opacity:0.4
        });
        var fget = new THREE.Mesh(fgetGeo,fgetMtl);
        scene.add(fget);
        fget.position.set(6,-9.3,0);
    });

render();

var raycaster = new THREE.Raycaster();
    var touches = new THREE.Vector2();
    var keys = [];
    window.addEventListener('touchend',function (e) {
        var touch = e.changedTouches[0];
        touches.x = (touch.clientX/window.innerWidth)*2-1;
        touches.y = - (touch.clientY/window.innerHeight)*2+1;

raycaster.setFromCamera(touches,camera);
        var intersects = raycaster.intersectObjects(scene.children,true);
        if(intersects.length > 0){
            var object = intersects[0].object.parent;
            // console.log(object);
            if(object.type === 'Group'){
                if(object.name === 'key' && !object.selected && keys.length < 6){
                    object.highLight(true);
                    keys.push(object);
                    sHexs[keys.length-1].highLight(true);
                    if(keys.length == 6){
                        //TODO 提交密码
                        var password = '';
                        for(var i=0;i<6;i++){
                            password += keys[i].key+'';
                        }
                        console.log('password::'+password);
                    }
                }
            }else{
                object = intersects[0].object;
                if(object.name === 'delete'){
                    if(keys.length){
                        sHexs[keys.length-1].highLight(false);
                        var lastKey = keys.pop();
                        lastKey.highLight(false);
                    }
                }
            }
        }

});
}

function render() {
    window.addEventListener('resize',onWindowResize,false);
    stop = requestAnimationFrame(render);
    renderer.render(scene,camera);
    TWEEN.update();
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth , window.innerHeight);
}

function stopAnimate() {
    window.cancelAnimationFrame(stop);
}

function smallHex(radius,position) {
    var group = new THREE.Group();
    group.name = 'show';
    group.selected = 'false';

var hexfGeo = new THREE.CircleGeometry(radius,6);
    group.hexfMtl1 = new THREE.MeshBasicMaterial({
        color:0xffffff,
        transparent:true,
        opacity:0
    });
    group.hexfMtl2 = new THREE.MeshBasicMaterial({
        color:0x50e3c2,
        transparent:true,
        opacity:0.8
    });
    var hexf = new THREE.Mesh(hexfGeo,group.hexfMtl1);
    hexf.position.set(position.x,position.y,position.z);
    group.add(hexf);
    group.face = hexf;

var hexLineGeo = new THREE.RingGeometry(radius*0.9,radius*1.1,6,0,0,Math.PI*2);
    var hexLineMtl = new THREE.MeshBasicMaterial({color:0xffffff,transparent:true,opacity:0.6});
    var hexLine = new THREE.Mesh(hexLineGeo,hexLineMtl);
    hexLine.position.set(position.x,position.y,position.z);
    group.add(hexLine);

group.highLight = function (type) {
        if(type){

group.face.material = group.hexfMtl2;
            group.selected = true;
            return;
        }
        group.face.material = group.hexfMtl1;
        group.selected = false;
    };

scene.add(group);
    return group;
}

function Hexagon(radius,position,id,type){

var group = new THREE.Group();
    group.selected = false;
    group.key = id;
    group.name = 'key';

var normalText = createNormalText(id,512,512,128);
    var highLightText = createHighLightText(id,512,512,128);

group.textNormalMtl = new THREE.MeshBasicMaterial({
        transparent:true,
        map:normalText
    });

group.textHighLightMtl = new THREE.MeshBasicMaterial({
        transparent:true,
        map:highLightText
    });

group.lineNormalMtl = new THREE.MeshBasicMaterial({
        color:0xffffff,
        transparent:true,
        opacity:0.2
    });

group.lineHighLightMtl = new THREE.MeshBasicMaterial({
        color:0x50e3c2
    });

group.bgNormalMtl = new THREE.MeshBasicMaterial({
        color:0xffffff,
        transparent:true,
        opacity:0.0
    });

var glowGeo = new THREE.CircleGeometry(radius*1.2,6);
    var glowMtl = new THREE.MeshBasicMaterial({
        color:0x50e3c2,
        transparent:true,
        opacity:0
    });
    var glow = new THREE.Mesh(glowGeo,glowMtl);
    group.add(glow);

group.glow = glow;

var bgGeo = new THREE.CircleGeometry(radius,6);
    var bgMesh = new THREE.Mesh(bgGeo,group.bgNormalMtl);
    var _value = type ? 0.1 : 0;
    bgMesh.material.opacity = _value;
    group.add(bgMesh);

var hexFaceGeo = new THREE.CircleGeometry(radius,6);
    var hexFace = new THREE.Mesh(hexFaceGeo,group.textNormalMtl);
    group.add(hexFace);

var hexLineGeo = new THREE.RingGeometry(radius*0.95,radius*1.05,6,0,0,Math.PI*2);
    var vertices = hexLineGeo.vertices;
    group.lines = [];
    for(var i=0;i<6;i++){
        var a = i;
        var b = i+6;
        var c = (i+7)>11?i+7-6:i+7;
        var d = (i+1)>5?(i+1-6):i+1;

var _fGeo = createFaceGeo(vertices[a],vertices[b],vertices[c],vertices[d]);
        var _f = new THREE.Mesh(_fGeo,group.lineNormalMtl);
        // _f.position.set(position.x,position.y,position.z);
        group.add(_f);
        group.lines.push(_f);
    }

function createFaceGeo(p1,p2,p3,p4) {
        var face0 = new THREE.Face3(0,1,2);
        var face1 = new THREE.Face3(0,2,3);
        var faceGeo = new THREE.Geometry();
        faceGeo.vertices = [p1,p2,p3,p4];
        faceGeo.faces = [face0,face1];
        faceGeo.computeFaceNormals();
        return faceGeo;
    }

function vector3Add(point1,point2){
        var x = point1.x + point2.x;
        var y = point1.y + point2.y;
        var z = 0;
        var point = new THREE.Vector3(x,y,z);
        return point;
    }

group.hexFace = hexFace;

var p0 = vector3Add(hexFace.geometry.vertices[1],position);
    var p1 = vector3Add(hexFace.geometry.vertices[2],position);
    var p2 = vector3Add(hexFace.geometry.vertices[3],position);
    var p3 = vector3Add(hexFace.geometry.vertices[4],position);
    var p4 = vector3Add(hexFace.geometry.vertices[5],position);
    var p5 = vector3Add(hexFace.geometry.vertices[6],position);
    group.points = [p0,p1,p2,p3,p4,p5];

group.highLight = function (type) {
        if(type){
            group.selected = true;
            group.hexFace.material = group.textHighLightMtl;
            group.hexFace.position.z = 0.01;
            group.glow.material.opacity = 0.1;
            for(var i=0;i<6;i++){
                group.lines[i].material = group.lineHighLightMtl;
                group.lines[i].position.z = 0.01;
            }
            new TWEEN.Tween(group.scale).to({x:1.03,y:1.03,z:1.03},300).start();
            return;
        }
        group.selected = false;
        group.hexFace.material = group.textNormalMtl;
        group.hexFace.position.z = 0;
        group.glow.material.opacity = 0;
        for(var i=0;i<6;i++){
            group.lines[i].material = group.lineNormalMtl;
            group.lines[i].position.z = 0;
        }
        new TWEEN.Tween(group.scale).to({x:1,y:1,z:1},100).start();
    };

scene.add(group);

var x = Math.random()*22 - 11;
    var y = Math.random()*44 - 22;

group.position.set(position.x,position.y,position.z);
    // group.position.set(x,y,position.z);

// new TWEEN.Tween(group.position).to({x:position.x,y:position.y,z:position.z},1500).start();

return group;
}

function createNormalText(string, width, height, fontSize) {
    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgba(255,255,255,0.4)';
    ctx.font = "bold "+ fontSize + "px '微软雅黑'";
    ctx.textBaseline = 'middle';
    ctx.textAlign = 'center';
    ctx.fillText(string,width/2,height/2);

var texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;
    return texture;
}

function createHighLightText(string, width, height, fontSize) {
    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgba(80,227,194,1)';
    ctx.font = "bold "+ fontSize + "px '微软雅黑'";
    ctx.textBaseline = 'middle';
    ctx.textAlign = 'center';
    ctx.fillText(string,width/2,height/2);

var texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;
    return texture;
}

window.onload = function () {
	init();
};

编译

CSS

HTML

hexagon password keyboard，带选中高亮效果（在手机上测试），来自网友ethen的作品。

h5, canvas, keyboard

编辑器支持Emmet

快捷键

hexagon password keyboard，带选中高亮效果（在手机上测试），来自网友ethen的作品。

h5, canvas, keyboard

HTML5 Canvas + Hammer.js圆点矩阵平面凸起交互动效

Chart.js实现经典雷达图表（基于canvas）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：