爱意满满的作品展示区。
rabbbit

迫于无聊,写了个魔方.

  •  5
     
  •   rabbbit · Jun 17, 2020 · 8573 views
    This topic created in 2182 days ago, the information mentioned may be changed or developed.

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

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

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

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

    还可以加点什么功能呢?

    预览
    Github 地址

    Supplement 1  ·  Jun 17, 2020
    还有个问题,为啥 Webpack + TypeScript 有时候编译很快(1 秒以下),有时侯需要花好几秒(5 ~ 20).
    可以给点优化建议吗?或者给个配置参考也可以.

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

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

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

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

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

    其实写的时候根本就没考虑到有人会手动改 URL ...
    所以就各种 Bug 了. 😂
    momo1999
        26
    momo1999  
       Jun 18, 2020   ❤️ 1
    加上光追效果
    rabbbit
        27
    rabbbit  
    OP
       Jun 18, 2020
    @shuax
    试了下光追,不太可行,手机带不动.
    rockjike
        28
    rockjike  
       Jun 18, 2020   ❤️ 2
    你这个配置我试了一下 4s 多, 没有办法减小,
    把 ForkTsCheckerWebpackPlugin 去掉能达到 2s,
    你的 1s 秒我没遇见过
    rabbbit
        29
    rabbbit  
    OP
       Jun 19, 2020
    我这偶尔改动少的时候, 速度很快.能到 1s.
    charten
        30
    charten  
       Jun 19, 2020
    万向节死锁警告
    DEVN
        31
    DEVN  
       Jun 29, 2020
    牛逼 哈哈
    chenz197
        32
    chenz197  
       Jul 2, 2020
    niub
    gaigechunfeng
        33
    gaigechunfeng  
       Jul 2, 2020
    @rockjike webpack 大神
    gaigechunfeng
        34
    gaigechunfeng  
       Jul 2, 2020
    楼主写的不错。我还没有用过 three.js ,看来要学习一下了。
    fkue587
        35
    fkue587  
       Jul 2, 2020
    不是国内服务器??加载太慢了.
    rabbbit
        36
    rabbbit  
    OP
       Jul 2, 2020
    @fkue587 预览也在 Github 上,估计被干扰了吧.
    t298
        37
    t298  
       Jul 3, 2020
    不能 360 旋转
    rabbbit
        38
    rabbbit  
    OP
       Jul 3, 2020
    @t298
    可以详细描述下不能旋转的问题吗?
    如果是指相机上下方向不能 360 度旋转的话, 这个是相机控制插件的限制.
    fuwu1245
        39
    fuwu1245  
       Jul 3, 2020
    收藏一波 挺好玩的
    huoxingren
        40
    huoxingren  
       Jul 13, 2020
    找到工作了嘛,我有些产品上的想法,不知道你有没有兴趣
    rabbbit
        41
    rabbbit  
    OP
       Jul 15, 2020
    @huoxingren
    您好, 可以留个联系方式(最好 qq, 交流起来比较方便)吗?
    也可以把联系方式发送到我的邮箱,邮箱地址见如下链接:
    https://ctxt.io/2/AADA6R9NFw
    huoxingren
        42
    huoxingren  
       Jul 15, 2020
    @rabbbit 已回邮件
    nsxiu
        43
    nsxiu  
       Sep 5, 2020
    @rabbbit
    兄弟,你的邮箱过期了,能再发个不?
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   962 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 99ms · UTC 22:00 · PVG 06:00 · LAX 15:00 · JFK 18:00
    ♥ Do have faith in what you're doing.