轩枫阁

首页 / Web前端 / CSS / 谷歌3D魔方涂鸦揭秘-Google Doodle Rubik’s Cube

谷歌3D魔方涂鸦揭秘-Google Doodle Rubik’s Cube

前言

5月19日,为了纪念魔方发明40周年,Google在首页发布了有史以来最酷的涂鸦:一个3D互动魔方。

关于魔方(Magic Cube)

魔方(Magic Cube),又称为鲁比克方块,由匈牙利布达佩斯建筑学院厄尔诺·鲁比克教授于1974年发明。魔方最初仅仅是一种帮助学生增强空间思维能力的教学工具,但随后却发展成风靡世界的益智玩具。

体验一把

史上最酷的web 3D魔方,看看你是否有能力通关呢?

官网版:https://www.google.com/logos/2014/rubiks/rubiks.html

备份版:http://xuanfengge.com/demo/201405/magic-cube/

Screen-Shot-2014-05-19-at-09.34.22

开发历程

3D魔方也是Google公司处理过的最有难度的涂鸦,魔方的成功要归功于CSS技术的进步和Google工程师们的聪明点子。制作这个拥有5.19X10^20种组合的魔方互动程序共耗去Google公司2个月的时间。

5737a564gw1egkkco4q1fg20ic070dsu

Google公司在重要的节日或纪念日发布涂鸦已经有14个年头,2年前Google发布了Moog合成器电子琴涂鸦,让全世界音乐爱好者为之疯狂,2010年的时候Google推出吃豆人涂鸦纪念吃豆人游戏推出30周年。我们可以看出最棒的涂鸦都是艺术和技术的累积——魔方也是如此。但在此之前,因为技术原因, Google无法将可互动魔方web化。Google魔方涂鸦团队的负责人莱恩·吉米克说:“魔方涂鸦这个点子一次次被提出,但是我们觉得技术还不足以将魔方推向web。”

这种情况在最近几个月内有了变化,Google创新实验室的理查德称赞魔方涂鸦是“目前Google在技术上最宏大的项目之一”。CSS3D转换在越来越多的浏览器上的普及,意味着web魔方的可行性。

“CSS3D转换让魔方在3D空间显示成为可能,这与栅格化2D显示不同。”团队领队工程师克里斯托弗·霍姆说,“3D显示会让魔方看起来更生动,随着你移动鼠标,你可以亲眼看到魔方在3D空间中旋转。”

吉米克说,制作3D魔方最大的困难在于捕捉魔方的简洁设计。“从设计方面看,我们希望设计的尽量简单简洁,最大程度简化了魔方的UI。”

Google还向外界放出了魔方的源代码,还在Chrome Experiment发布了几个数字互动魔方程序,同时还与美国著名的自由科学中心合作了一个实时互动展示项目,以纪念魔方诞生40周年。

谷歌往届魔方专题

5737a564gw1egkk4kq9ukj21hc0u076d

5737a564gw1egkk4iz37fj21hc0u0q52

5737a564gw1egkk4sp9opj21kw16nq66

5737a564gw1egkk4pf8mhj21hc0u0jtx

5737a564gw1egkk4m2b7uj21hc0u00v3

相关视频

更多好玩

谷歌魔方实验室

地址:https://chrome.com/cubelab

简介:Google介绍了制作3D魔方使用的技术方案,及其相关实验,并提供源码下载。

音乐魔方

地址:http://www.synthcu.be/

简介:不一样的玩法,会弹奏音乐的魔方,效果很赞

节奏魔方

地址:http://www.808cube.com/

简介:富有节奏动感的音乐魔方

图片魔方

地址:https://www.imagecu.be/

简介:魔方的每一面均支持使用图片自定义,不仅仅是单纯的颜色哦

自定义魔方

地址:http://iamthecu.be/

简介:多种魔方样式自定义,颠覆你想象

动画魔方

地址:https://www.imagecu.be/9tck597uv53/

简介:慎入,眼花缭乱

谷歌实验室魔方源码

地址:http://xuanfengge.com/demo/201405/cuber.zip

217/456
219/456

相关文章

文章评论

  • 楼主能不能谢写写该魔方涂鸦源代码的剖析书籍?

    • [拜拜]你当我闲着呀 还写书籍 看代码去咯

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]