如果想要在网页里放一个小小格温需要哪些技能? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
doco
V2EX    前端开发

如果想要在网页里放一个小小格温需要哪些技能?

  •  
  •   doco 2023-10-18 18:28:00 +08:00 1531 次点击
    这是一个创建于 799 天前的主题,其中的信息可能已经有所发展或是发生改变。
    小小格温就是 LOL 里的一个 3D 模型, 想提取出来放到网页里当成桌宠, 可以点击按钮控制动作之类的.
    目前的进度是提取出 glb 文件, 和这个视频里讲的一样: https://www.bilibili.com/video/BV1hN411Y72Z
    如果想继续推进的话需要哪些技能呢?
    去学 blender, three.js 就可以吗?
    8 条回复    2023-11-17 11:24:52 +08:00
    lemon435
        1
    lemon435  
       2023-10-18 23:28:28 +08:00 via iPhone
    那种都是 live2d 吧,我还没用过 3d 的
    lemon435
        2
    lemon435  
       2023-10-18 23:30:27 +08:00 via iPhone
    我记得有一个大鹅的桌面宠物,会跟着鼠标跑啥的,那个还挺有意思
    andyskaura
        3
    andyskaura  
       2023-10-19 09:11:55 +08:00
    threejs 吧,2 小时就足够让他在页面上蹦了
    andyskaura
        4
    andyskaura  
       2023-10-19 09:23:28 +08:00   1
    @andyskaura 不好意思,没看清题主的问题.
    有了 glb 模型,下一步就是选择 3d 引擎放到 web 的 canvas 内展示,无论什么引擎,需要提前了解场景,相机,光照,材质,渲染器,坐标这些基础概念.拓展一些就是动画,鼠标,2d 与 3d 交互.精进一点就是网格,顶点,着色器等 webgl 相关的.最后,如何优化是很考验开发的.
    Dogergo
        5
    Dogergo  
       2023-10-19 09:48:04 +08:00
    好想法,但是我不会,你加油,我给你喊 666
    MENGKE
        6
    MENGKE  
       2023-10-19 09:52:33 +08:00
    有 glb 了直接放 three 就可以吧
    lingxiaoli
        7
    lingxiaoli  
       2023-10-19 15:17:27 +08:00
    直接 chatgat 问一波看看
    sqlNice
        8
    sqlNice  
       2023-11-17 11:24:52 +08:00
    You: three.js 如何使用 glb 模型

    GitHub Copilot: 在 Three.js 中使用 GLB 模型的基本步骤如下:

    1. 首先,你需要加载 GLTFLoader 库,这是一个用于加载.glb 和.gltf 文件的库。

    2. 然后,你可以创建一个 GLTFLoader 实例,并调用其 load 方法来加载.glb 模型。

    3. 在 load 方法的回调函数中,你可以获取到模型的数据,并将其添加到场景中。

    以下是一个简单的示例:

    ```Javascript
    // 引入 GLTFLoader
    import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

    // 创建一个 GLTFLoader 实例
    const loader = new GLTFLoader();

    // 加载.glb 模型
    loader.load(
    'path_to_your_model.glb', // 模型文件的路径
    function ( gltf ) {
    // 当模型加载完成后,此回调函数会被调用
    // gltf 是一个包含了模型数据的对象
    // 你可以将模型添加到场景中
    scene.add( gltf.scene );
    },
    function ( xhr ) {
    // 这个函数会在模型加载过程中被调用,xhr.loaded / xhr.total 表示加载的进度
    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
    },
    function ( error ) {
    // 如果在加载模型过程中发生错误,此函数会被调用
    console.log( 'An error happened', error );
    }
    );
    ```

    请确保你的模型文件路径正确,并且你的服务器允许加载这些文件。
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2787 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 24ms UTC 14:50 PVG 22:50 LAX 06:50 JFK 09:50
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86