gpt4 book ai didi

css - 使用 css 将 2D Logo 转换为 3D?

转载 作者:行者123 更新时间:2023-11-28 09:24:58 25 4
gpt4 key购买 nike

我想要实现的目标:我想用 2d png 制作一个旋转的 3D Logo。

对于旋转,当然,我会使用 CSS3 的 3D 变换。但是有没有一些 CSS 可以给 png 一些深度?就像在 Illustrator 中使用挤压?我看到你可以在 CSS3 中做类似 3d 立方体的事情。但是 Logo 有很多曲线,我真的不知道从哪里开始来实现这种效果。

是否有任何资源可供我查找?但是我没有找到任何东西。

最好的问候

最佳答案

我构建了一个可以加载 obj 文件的 CSS 3D 引擎。因此,您必须在 3D 程序中构建 Logo 并将其导出为 obj 文件。

示例:http://css3d.bitworking.de/examples/example05.html

它有一些缺点:您只能使用平面四边形元素来建模对象。而且速度不是很快。 (我的 Logo 有 276 个 div 元素,它非常占用 CPU)

因此,如果 Logo 不必是交互式的,则最好使用 gif 动画、电影或 sprite 动画(在某种程度上具有交互性)。

否则您可以使用 WebGL(例如 JS 库 http://threejs.org/),它是硬件加速的并且可以很好地处理许多多边形。但您还必须在可以导出为 obj、3ds、fbx、ctm 或 blend 文件格式的 3D 程序中构建 Logo 。 (例如 http://www.blender.org/ )

例子:

http://threejs.org/examples/#webgl_geometry_text

http://threejs.org/examples/#webgl_loader_stl

关于css - 使用 css 将 2D Logo 转换为 3D?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25928275/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com