使用codex制作3D网页的心得

使用codex整了个前端视觉效果的宣传页,佬友们来锐评一下 开发调优 众所周知,codex的平面设计能力感觉不太行,所以我直接走了3D。所以加载可能需要点时间,如果网络环境不是很好的话,并且这个网页是重特效,所以拒绝了非桌面端访问。 isaca.run 建议大屏幕访问,首页的空间站模型需要加载一点时...
使用codex制作3D网页的心得
使用codex制作3D网页的心得
使用codex整了个前端视觉效果的宣传页,佬友们来锐评一下 开发调优
众所周知,codex的平面设计能力感觉不太行,所以我直接走了3D。所以加载可能需要点时间,如果网络环境不是很好的话,并且这个网页是重特效,所以拒绝了非桌面端访问。 isaca.run 建议大屏幕访问,首页的空间站模型需要加载一点时间。 如果是核显可能有掉帧感觉 佬友们如果有什么好的想法也可以说出来 tieba_003 来一个优化高手教教如何优化,确实有点小卡

忙里偷闲 :tieba_003:,今天终于能把上次分享的网页制作焚决发出来了。制作3D网页一般需要素材,光照,位置等资源。以下要点总结于使用5.4模型的情况下,5.5未知。也欢迎佬友做出新的3D网页进行展示分享。

大致流程是

  • 一个好的构思,这个构思可能一开始你就知道要做什么效果或者你逛模型看到一个不错的模型才有构思
  • 确定素材功能,例如你想做骨骼动画,那模型必须带有骨骼
  • 使用约束和多轮提示词实现
  • 调整材质,位置,光照,动画
  • 优化

先说素材,3D网页需要使用3D模型,codex是不能制作出精美的模型的,我在制作网页时一般使用公开可下载的模型,例如我的首页是使用了nasa公开的空间站和宇航员模型,当然也有些比较好使的资源网站。

Sketchfab

Sketchfab - The best 3D viewer on the web

With a community of over one million creators, we are the world’s largest platform to publish, share, and discover 3D content on web, mobile, AR, and VR.

这个网站大多数模型是可下载的,如果遇到了好看但是不能下载的模型可以使用3D ripper扣下来。

在素材方面有一些坑需要注意

  • 材质,如果模型自带的材质你认为足够了,那最好不要让codex画蛇添足,因为材质方面会改的一坨,包括但不限于以下类似提示词会让codex认为需要改材质,最好直接约束使用原材质

    当前模型的质感不够/不够亮
    
  • 骨骼动画,如果你的模型带有骨骼,你想为他增加骨骼动画,最好的方式是手搓一套,如果使用codex让他帮你整一套动画可能会发生 骨骼绑定错误/四肢抽搐 等达不到效果的情况

  • sketchfab有一个好处是可以使用官方的api拿到示例光照材质以及位置参数,这些参数能够很好的给codex做参考,代码如下

代码 (点击了解更多详细信息)

接着再说光照和位置,光照可以参考拿到的数据或者需要什么效果让codex自己加,这个影响不大,但是有些情况光照加了你的画面并没有变化,那么就与位置有关了,位置其实是坑最多的一集。

  • 光照可能codex默认会给你打在世界原点,加灯光的效果的时候,需要加约束,严格控制灯光朝向

  • codex似乎不能理解有关位置的真正含义,包括但不限于以下情况,尝试多次后始终不能达到你要的效果,最终可能只有俩种解决方案

    • 让codex给出配置文件位置有关的参数和计算方式(如果存在),自己手调
    • 给出模型具体节点和世界具体坐标,让codex修改
    让人物模型的正面朝向镜头/页面,同时露出上半身胸像
    参考我发的参考示意图,改变模型的朝向和方向
    
  • 有的佬友可能喜欢再加一层3D背景,这个也同理,不仅要考虑位置还需要考虑大小以及codex很喜欢加的遮罩(会导致看不见背景)

最后说一下杂项

  • 多端适配,我认为这个是没有必要的,如果做重3D还考虑手机/平板的话,那就太复杂了,初版只建议做桌面端+拦截检测,部分浏览器可能没有3D环境
  • codexplan模式可能喜欢自作主张加特效降级,这个根据个人情况增加约束
  • 还有些问题可能没想到,先看佬友们反馈吧,最后放点我的部分angents.md
部分angents.md (点击了解更多详细信息)

1 个帖子 - 1 位参与者

阅读完整话题

来源: linux.do查看原文