three.js--立方体

作者:baekpcyyy🐟

使用three.js渲染出可以调节大小的立方体

1.搭建开发环境

1.首先新建文件夹用vsc打开项目终端

2.执行npm init -y

创建配置文件夹

3.执行npm i [email protected]

安装three.js依赖

4.执行npm I vite -D

安装 Vite 作为开发依赖

5.根目录下新建index.html

作为页面入口文件

6.根目录新建src文件

在src文件夹里新建main.js

现在我们将新建的main.js引入到index.html中

7.src文件中新建assets/style/reset.css

这里我们可以写全局的样式 现在我们主要用来测试环境的搭建

将样式文件引入到index.html中

8.启动项目

在package.json中编写启动脚本

在项目终端输入npm run dev将项目启动

2.初识three.js

three.js中我们要渲染出一个图形需要

1.创建一个三维场景

2.创建一个相机

3.创建一个渲染器渲染

以下内容都在main.js中设置

1.将three.js导入在main.js中

2.创建一个三维场景

![请添加图片描述](https://img-blog.csdnimg.cn/b968021b26134cd09142bea81d68d638.png![请添加图片描述](https://file.jishuzhan.net/article/1730153884875231234/2dbc4ad81fee7b6ade14cb2756aacb71.webp)

3.创建相机

45 相机视角

window.innerWidth/window.innerHeight 宽高比 和显示器一致

1 //近平面 相机最近看到的物体

1000 // 远平面 相机最远看到的物体

4.创建渲染器

5.渲染

现在我们打开浏览器已经可以看见刚创建出来的正方体已经显示在了页面中

只不过我们没有去转动页面所以看见的是一个平面的图形

6.动画效果

现在我们打开浏览器可以看见三维正方体已经成功渲染

3.显示辅助坐标器

我们在创建渲染器上面加上如下代码

打开浏览器可以看见坐标器也成功渲染

ps:

红色x轴

绿色y轴

蓝色z轴

4.创建轨道控制器

使用鼠标可以三维观看立方体

![请添加图片描述](https://img-blog.csdnimg.cn/49fd5f18b1aa44d3a11![请添加图片描述](https://file.jishuzhan.net/article/1730153884875231234/73d12008b5d283a5e4cb76585c542edb.webp)![请添加图片描述](https://file.jishuzhan.net/article/1730153884875231234/b3e9fbd00b36c279c7c6edea981d11b0.webp)

将刚才的动画效果删除将渲染语句写入动画函数里

设置渲染器的动画循环

现在我们打开浏览器可以发现通过鼠标我们已经可以三维观看渲染出来的正方体了

5.创建自适应画布

就是浏览器窗口发生变化后页面的渲染也会发生变化

这段代码就是浏览器事件监听器监听窗口大小变化 变化后重新设置一系列内容

现在我们打开浏览器就可以发现渲染画面以及可以通过浏览器的改变而变化了

6.创建网格辅助对象

20 20 则是指将页面分成多少行多少列 后面的是对应行列的颜色

现在我们打开浏览器就可以看到网格辅助工具

7.对正方体进行基础的设置

在旋转中我们的旋转角度统一使用弧度制

ps:注意以下代码的书写位置

现在我们打开浏览器就可以发现我们正方体已经发生了变化

8.集成ui工具

自定义ui工具就可以在浏览器上进行立方体的基础设置便于开发直观看到效果

1.首先我们在终端下载依赖

npm i dat.gui

2.然后我们将集成工具进行导入

3.初始化集成GUI

我们将设置移动位置的代码用如下代码进行替换

const guiPosition = gui.addFolder('位置信息')

这里我们是在页面中新建一个位置信息改变的文件夹

guiPosition.add(cube.position, 'x', -10, 10, 1)
guiPosition.add(cube.position, 'y', -10, 10, 1)
guiPosition.add(cube.position, 'z', -10, 10, 1)

这三句则是对立方体在x轴 y轴 z 轴的位置进行初始化

缩放和位置信息的初始化逻辑一致

我们将重点讲解旋转逻辑

const guiRotate = gui.addFolder('旋转')

在页面中新建旋转文件夹

const data = {
复制代码
x: 0,
y: 0,
z: 0,

}

将初始xyz的角度放在data对象中

使用onChange回调函数将移动的value值转化为弧长制在赋值给cube.rotation

现在我们打开浏览器就可以使用集成工具在浏览器页面上设置立方体的大小了

相关推荐
excel3 分钟前
招幕技术人员
前端·javascript·后端
淋一遍下雨天23 分钟前
Spark Streaming核心编程总结(四)
java·开发语言·数据库
小白学大数据30 分钟前
如何避免爬虫因Cookie过期导致登录失效
开发语言·爬虫·python·scrapy
烛阴1 小时前
Promise无法中断?教你三招优雅实现异步任务取消
前端·javascript
爱吃烤鸡翅的酸菜鱼1 小时前
【SpringMVC】概念引入与连接
java·开发语言·mysql
小白学大数据1 小时前
Python自动化解决滑块验证码的最佳实践
开发语言·python·自动化
碎梦归途1 小时前
23种设计模式-行为型模式之策略模式(Java版本)
java·开发语言·jvm·设计模式·策略模式·行为型模式
Albert Edison2 小时前
Python入门基础
开发语言·python
小余吃大鱼2 小时前
OpenStack私有云详细介绍
开发语言·php·openstack
画个大饼2 小时前
Swift:什么是Optional?其背后的机制是什么?什么是Unconditional Unwrapping?
开发语言·ios·swift