杨靖:Web3D应用《友思》 以及其开发历程

7月19日,由HTML5梦工场主办的第四届HTML5峰会暨攻城师嘉年华(iWeb峰会)首站在上海开幕,会上UPYUN(又拍云)的 CTO 黄慧攀发表了《HTML5 应用加速》主题演讲。

以下是演讲实录: 9. Web3D应用《友思》 以及其开发历程.001

各位帅哥美女,大家晚上好,今天给大家介绍一款3D应用,主要是为了大家了解我们如何在3D做构建的交互。大家应该都玩过积木的游戏,少年做房子可能会出现一些操作误差,大家可以扫一下二维码。 9. Web3D应用《友思》 以及其开发历程.002

这是一个3D场景,通过点击和拖动就可以对这个3D场景中的方块进行伸缩或者是改变颜色,也可以通过拖动,比如说要做一个桌子,这就是一个红色的桌子,这个应用是投放在(英文)市场,放在国外市场也是比较火的应用。大部分用户都是小朋友,为了让小孩子也能够轻松上手,我们这几年做了很多交互上的优化,其实我们在几年前也演示过这款应用。现在给大家看一个视频。这个是国外的小朋友做的,做了一个房子,一个池子,还有一个圣诞老人,大家都喜欢造房子。

9. Web3D应用《友思》 以及其开发历程.003

我们在做模型的时候,我们做了几个限制,让用更方便避免误操作,我们每次都会锁定操作点。在拖动之后,中心点会自动到模型的中央,这样不至于用户玩着就不知道自己在做什么东西。其次就是模型最大最小转角,我们锁定上下两个转角。我们在每次拖动开始之后就会锁定他的方向,比如说我现在往这个方向拖。我们这种交互不仅在3D的应用中,比如说,在PC、ipad 上都是非常适用的。

9. Web3D应用《友思》 以及其开发历程.004

9. Web3D应用《友思》 以及其开发历程.005

9. Web3D应用《友思》 以及其开发历程.006

9. Web3D应用《友思》 以及其开发历程.007

9. Web3D应用《友思》 以及其开发历程.008

9. Web3D应用《友思》 以及其开发历程.009

这边给大家分享如何拖动模型,我们每次点到原点的时候,都会在这个点的周围生产三个面,这个三个面会跟我们触摸的手指进行碰撞,最后在相对的面上进行投影,不管是现在3D技术发展,如何让用户以更好交互方式婉转应用,我们写个人创作模式的时候,我们会加入更多交互方式,比如说整个场景平移。

9. Web3D应用《友思》 以及其开发历程.010

9. Web3D应用《友思》 以及其开发历程.011

9. Web3D应用《友思》 以及其开发历程.012

9. Web3D应用《友思》 以及其开发历程.013

9. Web3D应用《友思》 以及其开发历程.014

9. Web3D应用《友思》 以及其开发历程.015

最后给大家看一下几年前小朋友做的模型,最开始大家只能做一只鸡,一辆车。后来用像素画画,现在有些小朋友能够做大的模型,有的时候会做一整天。