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

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 1660 days ago, the information mentioned may be changed or developed.

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

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

请教

建模

插件

效果

19 replies • 2022-04-27 21:40:49 +08:00

Dididadada

Apr 26, 2022

3d 建模随便什么软件都可以，导出一个 gltf 或者 glb 文件，然后用 threejs 或者 babylonjs 这样的 webgl 引擎加载就好了，简单调一下渲染设置，都是现成 api ，五分钟搞定

7075

Apr 26, 2022

h5 canvas.

version0

Apr 26, 2022

前端展示不难，treejs 之类的工具库可以加载建模软件导出的格式，难得是建模吧，这工作量的 99%都花在建模上了吧，我看每个部件都做出来了，不仅仅是捏一个盒子加贴图

hawei

Apr 26, 2022 via iPhone

Three.js

ilxv

Apr 26, 2022

很多 3D 模型网站就是这样可拖动预览的效果

zhujoen

Apr 26, 2022

[https://threejs.org/]( https://threejs.org/)

KouShuiYu

Apr 26, 2022

https://model-viewer.glitch.me/
支持者 gltf 谷歌出的

kangyan

Apr 26, 2022

这个精细度做的还是有水平的吧。。。楼上都这么强的吗

Heanes

Apr 26, 2022

收藏一下

pandaPapa

Apr 26, 2022

之前公司找人做过整个农村房屋的模型, 里面家具都有. 好像是 3000 一个

rekulas

Apr 26, 2022

@kangyan 这只是最基础的展示，光技术上确实没什么难度，哪怕没 3d 经验照着教程也能 2 天撸一个出来，当然贴图需要美工提供下
看看这个，才是高技术含量的
https://summerandwinter.github.io/lab/webgl-water/index.html

beginor

Apr 26, 2022

@rekulas 这个对数学要求比较高，3d 这块写代码容易，但是数学是一大门槛，足以劝退绝大多数人。

BruceLi

Apr 26, 2022

@Dididadada 感谢，我研究一下 three.js 。

BruceLi

Apr 26, 2022

@rekulas 这个要了解物理引擎才行吧，和我的需求相比明显超纲了。。。

flyhelan

Apr 26, 2022

@rekulas 有点吊，怎么做出来的？

rekulas

Apr 26, 2022

@BruceLi
@flyhelan
正常人做确实是找个轮子比如 threejs 配合个物理 /粒子、光照引擎，不过这个的作者是个大神好像没用轮子自己手撸的，webgl+图形学+数学，对基础功要求太高，而且很多年前就写出来了，那时候 web 3d 才刚刚开始流行
不过得益于现在的成熟生态让我们这些图形学小白也能写出类似作品来了

flyhelan

Apr 27, 2022

@rekulas 嗯。才发现人家是 13 年写的。

beijiaoff

Apr 27, 2022

华为这个从产品展示角度来说挺不错的。

BruceLi

Apr 27, 2022 via iPad

@rekulas 能手撸出这个效果确实太牛了