迫于无聊,写了个魔方. - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
rabbbit
V2EX    分享创造

迫于无聊,写了个魔方.

  •  5
     
  •   rabbbit 2020-06-17 15:38:10 +0:00 8309 次点击
    这是一个创建于 2025 天前的主题,其中的信息可能已经有所发展或是发生改变。

    找不着工作,闲的无聊找事干.于是拿 Three.js 写了个魔方.

    手势部分意外的比想象中难搞,写游戏是真难啊.

    支持 PC/移动端,可用鼠标 /手指头操作.
    按住空白区域移动可旋转整体.
    按住魔方移动可旋转对应的层.

    魔方的颜色会同步到 URL 里.如果想分享当前的颜色状态给别人的话, 直接拷贝 URL 即可.

    还可以加点什么功能呢?

    预览
    Github 地址

    第 1 条附言    2020-06-17 23:07:25 +08:00
    还有个问题,为啥 Webpack + TypeScript 有时候编译很快(1 秒以下),有时侯需要花好几秒(5 ~ 20).
    可以给点优化建议吗?或者给个配置参考也可以.

    配置地址:
    https://github.com/Aaron-Bird/rubiks-cube/blob/master/webpack.config.js
    第 2 条附言    2020-06-22 13:48:52 +08:00
    第 3 条附言    2020-07-01 23:51:39 +08:00
    增加打乱 复原功能
    43 条回复    2020-09-05 14:38:03 +08:00
    Jackeriss
        1
    Jackeriss  
       2020-06-17 16:05:09 +08:00   1
    1. 自动打乱
    2. 自动解
    kop1989
        2
    kop1989  
       2020-06-17 16:08:05 +08:00   2
    拖动某层的时候有时候魔方那层会出现和预期不匹配的惯性( pc chrome 浏览器 鼠标操作)。大概描述就是松手后反而会在自己转几圈。
    coderluan
        3
    coderluan  
       2020-06-17 16:08:22 +08:00   1
    支持自定义图片? 我感觉除非你贴图换成小黄图, 否则应该没人会想这样玩魔方的.
    Lin0936
        4
    Lin0936  
       2020-06-17 16:08:27 +08:00   1
    ashong
    &nsp;   5
    ashong  
       2020-06-17 16:10:24 +08:00   2
    不错, 应该加上 步骤口诀, 以便新手练习
    meisen
        6
    meisen  
       2020-06-17 16:11:22 +08:00   3
    @Lin0936 #4 这个难度刚刚好,楼主的太简单。
    rabbbit
        7
    rabbbit  
    OP
       2020-06-17 16:13:02 +08:00
    @kop1989
    是不是鼠标移动到视口外面了,可以录个 Gif 复现一下过程吗?
    rabbbit
        8
    rabbbit  
    OP
       2020-06-17 16:14:47 +08:00
    @coderluan
    这个可以有,把颜色换成随机的贴图.
    di1012
        9
    di1012  
       2020-06-17 16:14:52 +08:00
    太难用了
    kop1989
        10
    kop1989  
       2020-06-17 16:15:26 +08:00   2
    @rabbbit #7 找到 bug 的触发点了,转 355 度以上必出。
    kop1989
        11
    kop1989  
       2020-06-17 16:15:58 +08:00
    @rabbbit #7 355 度到 360 度之间,然后松手,魔方会反转
    rabbbit
        12
    rabbbit  
    OP
       2020-06-17 16:16:14 +08:00
    @di1012
    能说说哪里不好用吗,是操作起来不舒服吗?
    rabbbit
        13
    rabbbit  
    OP
       2020-06-17 16:18:39 +08:00
    @kop1989
    这种 bug 都能找出来...厉害
    kop1989
        14
    kop1989  
       2020-06-17 16:20:33 +08:00
    @rabbbit #13 只能说明上班划水划的走心
    rabbbit
        15
    rabbbit  
    OP
       2020-06-17 18:51:04 +08:00
    @Lin0936
    没加判断, 出 bug 变空白魔方了
    imdong
        16
    imdong  
       2020-06-17 18:55:56 +08:00   1
    稍稍改了一下,

    https://aaron-bird.github.io/rubiks-cube/?fd=BURDRBLLDLRFLRDLRDBBFBRFDDFRRUURFFDLRLURRURLBDFUBRUBFU

    emm 这个 你们绝对会拼,无法复原的来打我...
    rabbbit
        18
    rabbbit  
    OP
       2020-06-17 19:15:28 +08:00
    @imdong
    呃,看来得加个 URL 颜色校验...
    aguesuka
        19
    aguesuka  
       2020-06-17 23:36:01 +08:00 via Android   1
    可以加一个《魔方和数学建模》
    winmer
        20
    winmer  
       2020-06-18 07:10:09 +08:00 via Android   1
    那个全红的状态任意一行往一个方向连续转 6 次之后,另选一行转一圈就会多出两格白色
    正面中间竖行直接向下转一圈之后 下方横行逆时针转一圈也会出现白格
    怀疑计算公式有问题
    winmer
        21
    winmer  
       2020-06-18 07:15:43 +08:00 via Android
    不对 正面顶端横行一转背面就会出现白块
    我复原不了了 我要打楼主(滑稽
    当然有可能是本来计算六色的公式直接拿来套双色忘了改参数就是了
    linxiaojialin
        22
    linxiaojialin  
       2020-06-18 09:20:00 +08:00   1
    666,给 LZ 加个星。有二、四、五阶版本吗?
    8629
        23
    8629  
       2020-06-18 10:23:51 +08:00   1
    @imdong 绿色少一个正中的
    xcatliu
        24
    xcatliu  
       2020-06-18 11:27:57 +08:00   1
    实现上帝之数的解法
    rabbbit
        25
    rabbbit  
    OP
       2020-06-18 11:45:36 +08:00
    @winmer

    上面那个全红的少两个颜色, 下面这样就不会有白的了.

    https://aaron-bird.github.io/rubiks-cube/?fd=RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR

    其实写的时候根本就没考虑到有人会手动改 URL ...
    所以就各种 Bug 了.
    momo1999
        26
    momo1999  
       2020-06-18 12:16:16 +08:00   1
    加上光追效果
    rabbbit
        27
    rabbbit  
    OP
       2020-06-18 15:02:35 +08:00
    @shuax
    试了下光追,不太可行,手机带不动.
    rockjike
        28
    rockjike  
       2020-06-18 17:23:08 +08:00   2
    你这个配置我试了一下 4s 多, 没有办法减小,
    把 ForkTsCheckerWebpackPlugin 去掉能达到 2s,
    你的 1s 秒我没遇见过
    rabbbit
        29
    rabbbit  
    OP
       2020-06-19 13:03:29 +08:00
    我这偶尔改动少的时候, 速度很快.能到 1s.
    charten
        30
    charten  
       2020-06-19 17:50:04 +08:00
    万向节死锁警告
    DEVN
        31
    DEVN  
       2020-06-29 15:45:14 +08:00
    牛逼 哈哈
    chenz197
        32
    chenz197  
       2020-07-02 09:40:10 +08:00
    niub
    gaigechunfeng
        33
    gaigechunfeng  
       2020-07-02 11:37:20 +08:00
    @rockjike webpack 大神
    gaigechunfeng
        34
    gaigechunfeng  
       2020-07-02 11:38:00 +08:00
    楼主写的不错。我还没有用过 three.js ,看来要学习一下了。
    fkue587
        35
    fkue587  
       2020-07-02 14:07:14 +08:00
    不是国内服务器??加载太慢了.
    rabbbit
        36
    rabbbit  
    OP
       2020-07-02 21:01:13 +08:00
    @fkue587 预览也在 Github 上,估计被干扰了吧.
    t298
        37
    t298  
       2020-07-03 10:51:10 +08:00
    不能 360 旋转
    rabbbit
        38
    rabbbit  
    OP
       2020-07-03 14:36:43 +08:00
    @t298
    可以详细描述下不能旋转的问题吗?
    如果是指相机上下方向不能 360 度旋转的话, 这个是相机控制插件的限制.
    fuwu1245
        39
    fuwu1245  
       2020-07-03 17:20:54 +08:00
    收藏一波 挺好玩的
    huoxingren
        40
    huoxingren  
       2020-07-13 14:04:36 +08:00
    找到工作了嘛,我有些产品上的想法,不知道你有没有兴趣
    rabbbit
        41
    rabbbit  
    OP
       2020-07-15 12:19:22 +08:00
    @huoxingren
    您好, 可以留个联系方式(最好 qq, 交流起来比较方便)吗?
    也可以把联系方式发送到我的邮箱,邮箱地址见如下链接:
    https://ctxt.io/2/AADA6R9NFw
    huoxingren
        42
    huoxingren  
       2020-07-15 15:40:58 +08:00
    @rabbbit 已回邮件
    nsxiu
        43
    nsxiu  
       2020-09-05 14:38:03 +08:00
    @rabbbit
    兄弟,你的邮箱过期了,能再发个不?
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     858 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 25ms UTC 23:24 PVG 07:24 LAX 15:24 JFK 18:24
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86