我们一直想实现在手机小程序,打开就能拼积木,功能也尽可能的做到电脑拼搭的效果。
但是这件事的难度是真的很大。所以过去2~3年时间,我们一直在想办法技术突破,终于这件事做出来了!
在线拼搭入口:
![]()
现在,只要在底部导航点击“拼搭”,就能够进入拼搭广场,点击顶部宣传图就能进入工作区了。
![]()
在这里,我们就能够用上PC端几乎所有大家能想到的拼搭功能。接下来让我慢慢介绍。
添加零件:
![]()
![]()
点击底部菜单“添加”,即可看到零件表,选择需要的零件和颜色添加到工作台。
添加套装零件:
![]()
如果是套内情况,零件范围会被套装零件限制,方面大家进行套内创作:
![]()
零件旋转
长按零件,就会出现三个轴的剪头。点击剪头拖动就可以旋转:
![]()
如果零件吸附在了铰链等上面,旋转范围会被限制,剪头会有相应提示:
![]()
零件打包
先长按空白位置,拖动绿色框,选中零件。
![]()
然后点击左下角“打包”:
![]()
就可以对这批零件进行子模型管理。
零件复制与粘贴
有了零件打包后,就可以批量复制黏贴,提高拼搭效率:
![]()
注意,套内的拼搭,复制黏贴会被零件表的数量限制。
分享拼搭模型(ldr)
拼搭完成,除了可以保存在云端,还能直接导出ldr格式的图纸,发送给“文件传输助手”。
![]()
高清渲染:
同时,小程序目前支持8K的高清渲染,效果如下:
![]()
虽然渲染效果不如PC,但是也够用了。(目前测试阶段,可能存在一些渲染的BUG,我们会逐步找出来并修复)。
最后,让我们看看从0开始,在小程序拼搭出30723套内校车,需要多少秒?
现在,小程序已经全面更新,赶快点击下方进入小程序尝试拼搭吧:
![]()
其他一些分享:
最后分享下实现这个功能的一些过程难点。最复杂的当然就是性能调优。
小程序限制了代码尺寸和运行内存,而且还有阉割版本的webGL。这导致过去几年,我们一直重写整个渲染核心。光three.js我们就重写了很多次,最后用上了c++去重写打包wasm才终于实现了秒加载。
其次就是吸附功能。这几乎就是体力活,需要对积木颗粒每个特定位置标记凹凸点才能实现吸附。
之后,我们会基于这个拼搭做一些好玩的小游戏,也希望大家给给意见,看还需要什么功能,欢迎留言!
评论区来讨论下吧!!
积木圈子 每日提供最新玩具资讯!
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.