threeJs引入模型使用3D模型(vite+React+Ts)

要在 Three.js 中使用 3D 模型,你需要加载模型文件并将其添加到场景中。Three.js 支持多种不同的模型格式,比如 OBJ、FBX、GLTF 等。

init vite@latest //创建一个vite的脚手架

选择react并配置Ts

安装three.js准备

复制代码
npm install @react-three/drei

npm install @react-three/drei

npm i @types/three

npm i --save three

这里为了操作方便,我们使用styled-components,它利用标记的模板文本(JavaScript的最新添加)和CSS的强大功能,styled-components允许您编写实际的CSS代码来设置组件的样式。它还删除了组件和样式之间的映射------将组件用作低级样式构造是再容易不过了。styled-components.com/

复制代码
npm i styled-components

我是接着之前的博客进行,有兴趣可以看我之前写的文章

准备glTF

这里普及一个工具

gltf-pipeline由Richard Lee和Cesium团队用来优化glTF的工具。

  • 将glTF转换为glb(并反向)

  • 将缓冲区/纹理保存为嵌入文件或单独文件

  • 将glTF 1.0模型转换为glTF 2.0

  • 应用Draco网格压缩

    npm install -g gltf-pipeline

将 glTF 转换为 Draco glTF。然后通过终端进入到3d模型的目录下,在终端输入以下命令:

安装一个gltfjsx将上面的gltf转化成js

然后

注意gan. gltf放在public目录下

不然会报错

相关推荐
Java~~1 分钟前
山东大学软件学院项目实训-基于大模型的模拟面试系统-前端美化滚动条问题
前端
掘金安东尼12 分钟前
🧭 前端周刊第411期(2025年4月21日–27日)
前端·javascript·面试
喝养乐多长不高22 分钟前
详细PostMan的安装和基本使用方法
java·服务器·前端·网络协议·测试工具·https·postman
阿珊和她的猫42 分钟前
React 与 Vue 的区别:你会选择哪个框架呢
前端·vue.js·react.js
尖椒土豆sss44 分钟前
Nuxt3框架入门:第一个简单demo
前端·nuxt.js
浪裡遊1 小时前
前端高频面试题day2
前端·javascript·vue.js
独立开阀者_FwtCoder1 小时前
Vue3 首款 3D 数字孪生编辑器 正式开源!
前端·javascript·vue.js
晓得迷路了1 小时前
栗子前端技术周刊第 78 期 - React Compiler RC、Trae MCP、pnpm 10.9...
前端·javascript·trae
神秘代码行者1 小时前
使用Hash和HTML5的History API实现前端路由
前端·html5