本文介绍: 这里为了操作方便,我们使用styledcomponents,它利用标记模板文本(JavaScript最新添加)和CSS的强大功能styledcomponents允许您编写实际的CSS代码设置组件样式。要在 Three.js使用 3D 模型,你需要加载模型文件并将其添加到场景中。Three.js 支持多种不同的模型格式比如 OBJ、FBX、GLTF 等。将 glTF 转换为 Draco glTF。gltfpipeline由Richard Lee和Cesium团队用来优化glTF的工具

要在 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

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

npm i styled-components

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

准备glTF

这里普及一个工具

gltfpipeline由Richard Lee和Cesium团队用来优化glTF的工具

npm install -g gltf-pipeline

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

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

然后

注意gan. gltf放在public目录

不然会报错

原文地址:https://blog.csdn.net/VVVVV16/article/details/134642365

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_15703.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除!

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注