1
lemon435 2023-10-18 23:28:28 +08:00 via iPhone
那种都是 live2d 吧,我还没用过 3d 的
|
2
lemon435 2023-10-18 23:30:27 +08:00 via iPhone
我记得有一个大鹅的桌面宠物,会跟着鼠标跑啥的,那个还挺有意思
|
3
andyskaura 2023-10-19 09:11:55 +08:00
threejs 吧,2 小时就足够让他在页面上蹦跶了
|
4
andyskaura 2023-10-19 09:23:28 +08:00 1
@andyskaura 不好意思,没看清题主的问题.
有了 glb 模型,下一步就是选择 3d 引擎放到 web 的 canvas 内展示,无论什么引擎,需要提前了解场景,相机,光照,材质,渲染器,坐标这些基础概念.拓展一些就是动画,鼠标,2d 与 3d 交互.精进一点就是网格,顶点,着色器等 webgl 相关的.最后,如何优化是很考验开发的. |
5
Dogergo 2023-10-19 09:48:04 +08:00
好想法,但是我不会,你加油,我给你喊 666
|
6
MENGKE 2023-10-19 09:52:33 +08:00
有 glb 了直接放 three 就可以吧
|
7
lingxiaoli 2023-10-19 15:17:27 +08:00
直接 chatgat 问一波看看
|
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 ); } ); ``` 请确保你的模型文件路径正确,并且你的服务器允许加载这些文件。 |