首页 注册 登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
广告
rabbbit
V2EX  ›  分享创造

迫于无聊,写了个魔方.

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

    找不着工作,闲的无聊找事干.于是拿 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
    更改预览地址 https://aaron-bird.github.io/demo/rubiks-cube/index.html
    修改样式
    第 3 条附言  ·  2020-07-01 23:51:39 +08:00
    增加打乱 复原功能
  • 魔方
  • 无聊
  • GitHub
  • 找事
    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
    https://aaron-bird.github.io/rubiks-cube/?fd=null
    😂
    ashong
        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 了. 😂
    shuax
        26
    shuax  
       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   ·   实用小工具   ·   2912 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 40ms · UTC 08:10 · PVG 16:10 · LAX 00:10 · JFK 03:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.