有网站专门做效果图,深圳公司网站搭建公司,江苏省建设集团有限公司官网,wordpress 自动上传插件作者#xff1a;baekpcyyy#x1f41f;
使用three.js渲染出可以调节大小的立方体
1.搭建开发环境
1.首先新建文件夹用vsc打开项目终端
2.执行npm init -y
创建配置文件夹
3.执行npm i three0.152
安装three.js依赖
4.执行npm I vite -D
安装 Vite 作为开发依赖 5.根…作者baekpcyyy
使用three.js渲染出可以调节大小的立方体
1.搭建开发环境
1.首先新建文件夹用vsc打开项目终端
2.执行npm init -y
创建配置文件夹
3.执行npm i three0.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.创建一个三维场景
这里我们是在页面中新建一个位置信息改变的文件夹
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 现在我们打开浏览器就可以使用集成工具在浏览器页面上设置立方体的大小了
