V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
doco
V2EX  ›  前端开发

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

  •  
  •   doco · 2023-10-18 18:28:00 +08:00 · 1145 次点击
    这是一个创建于 388 天前的主题,其中的信息可能已经有所发展或是发生改变。
    小小格温就是 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  
       358 天前
    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   ·   实用小工具   ·   2650 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 03:03 · PVG 11:03 · LAX 19:03 · JFK 22:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.