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

[doco]

小小格温就是 LOL 里的一个 3D 模型, 想提取出来放到网页里当成桌宠, 可以点击按钮控制动作之类的.
目前的进度是提取出 glb 文件, 和这个视频里讲的一样: https://www.bilibili.com/video/BV1hN411Y72Z
如果想继续推进的话需要哪些技能呢?
去学 blender, three.js 就可以吗?

[lemon435]

那种都是 live2d 吧，我还没用过 3d 的

[lemon435]

我记得有一个大鹅的桌面宠物，会跟着鼠标跑啥的，那个还挺有意思

[andyskaura]

threejs 吧,2 小时就足够让他在页面上蹦跶了

[andyskaura]

@andyskaura 不好意思,没看清题主的问题.
有了 glb 模型,下一步就是选择 3d 引擎放到 web 的 canvas 内展示,无论什么引擎,需要提前了解场景,相机,光照,材质,渲染器,坐标这些基础概念.拓展一些就是动画,鼠标,2d 与 3d 交互.精进一点就是网格,顶点,着色器等 webgl 相关的.最后,如何优化是很考验开发的.

[Dogergo]

好想法，但是我不会，你加油，我给你喊 666

[MENGKE]

有 glb 了直接放 three 就可以吧

[lingxiaoli]

直接 chatgat 问一波看看

[sqlNice]

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 );
}
);
```

请确保你的模型文件路径正确，并且你的服务器允许加载这些文件。