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

迫于无聊,写了个魔方.

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

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

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

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

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

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