请教一下这种 3D 展示方式是怎么实现的?

2022-04-26 11:05:40 +08:00
 BruceLi

效果从这里看到的 https://info.support.huawei.com/storage/3d-center/#/detail?productId=product_0723388318&model=dorado_18000v6_control_sas

想请教一下这种效果用的什么建模工具和浏览器插件 /JS 库。

3265 次点击
所在节点    程序员
19 条回复
Dididadada
2022-04-26 11:09:11 +08:00
3d 建模随便什么软件都可以,导出一个 gltf 或者 glb 文件,然后用 threejs 或者 babylonjs 这样的 webgl 引擎加载就好了,简单调一下渲染设置,都是现成 api ,五分钟搞定
7075
2022-04-26 11:56:11 +08:00
h5 canvas.
version0
2022-04-26 12:08:39 +08:00
前端展示不难,treejs 之类的工具库可以加载建模软件导出的格式,难得是建模吧,这工作量的 99%都花在建模上了吧,我看每个部件都做出来了,不仅仅是捏一个盒子加贴图
hawei
2022-04-26 12:11:19 +08:00
Three.js
ilxv
2022-04-26 12:19:17 +08:00
很多 3D 模型网站就是这样可拖动预览的效果
zhujoen
2022-04-26 12:19:26 +08:00
KouShuiYu
2022-04-26 15:07:17 +08:00
https://model-viewer.glitch.me/
支持者 gltf 谷歌出的
kangyan
2022-04-26 15:09:32 +08:00
这个精细度做的还是有水平的吧。。。楼上都这么强的吗
Heanes
2022-04-26 15:13:37 +08:00
收藏一下
pandaPapa
2022-04-26 15:26:00 +08:00
之前公司找人做过整个农村房屋的模型, 里面家具都有. 好像是 3000 一个
rekulas
2022-04-26 15:36:23 +08:00
@kangyan 这只是最基础的展示,光技术上确实没什么难度,哪怕没 3d 经验照着教程也能 2 天撸一个出来,当然贴图需要美工提供下
看看这个,才是高技术含量的
https://summerandwinter.github.io/lab/webgl-water/index.html
beginor
2022-04-26 18:27:33 +08:00
@rekulas 这个对数学要求比较高,3d 这块写代码容易,但是数学是一大门槛, 足以劝退绝大多数人。
BruceLi
2022-04-26 21:04:25 +08:00
@Dididadada 感谢,我研究一下 three.js 。
BruceLi
2022-04-26 21:05:58 +08:00
@rekulas 这个要了解物理引擎才行吧,和我的需求相比明显超纲了。。。
flyhelan
2022-04-26 22:57:33 +08:00
@rekulas 有点吊,怎么做出来的?
rekulas
2022-04-26 23:26:01 +08:00
@BruceLi
@flyhelan
正常人做确实是找个轮子比如 threejs 配合个物理 /粒子、光照引擎,不过这个的作者是个大神好像没用轮子自己手撸的,webgl+图形学+数学,对基础功要求太高,而且很多年前就写出来了,那时候 web 3d 才刚刚开始流行
不过得益于现在的成熟生态让我们这些图形学小白也能写出类似作品来了
flyhelan
2022-04-27 09:04:17 +08:00
@rekulas 嗯。才发现人家是 13 年写的。
beijiaoff
2022-04-27 10:45:05 +08:00
华为这个从产品展示角度来说挺不错的。
BruceLi
2022-04-27 21:40:49 +08:00
@rekulas 能手撸出这个效果确实太牛了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/849309

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX