作者:baekpcyyy🐟
使用three.js渲染出可以调节大小的立方体
1.搭建开发环境
1.首先新建文件夹用vsc打开项目终端
2.执行npm init -y
创建配置文件夹
3.执行npm i three@0.152
安装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.创建一个三维场景

现在我们打开浏览器可以看见三维正方体已经成功渲染
3.显示辅助坐标器
我们在创建渲染器上面加上如下代码
打开浏览器可以看见坐标器也成功渲染
ps:
红色x轴
绿色y轴
蓝色z轴
4.创建轨道控制器
使用鼠标可以三维观看立方体

这里我们是在页面中新建一个位置信息改变的文件夹
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
现在我们打开浏览器就可以使用集成工具在浏览器页面上设置立方体的大小了