three.js结合vue

作者：baekpcyyy

1.搭建环境

ps：这里要按照node.js在之前有关vue搭建中有介绍
新建文件夹并在vsc终端中打开

1.输入vite创建指令

npm init vite@latest

然后我们cd进入刚才创建的目录下

npm install

安装所需依赖

npm run dev

启动该项目

2.整理页面

将template 标签以及style标签中的内容进行整理

3.将three.js中main.js的内容我们可以放在script标签中

2.使用集成gui

1.导入

这里的导入方式和不结合vue还是有区别的

2.创建点击全屏 退出全屏按钮

1.首先创建对象

2.创建gui

3.添加按钮

将创建的对象以及对象的函数最为参数

现在我们就可以点击屏幕上渲染的按钮进行全屏和退出全屏

下面是不利于集成gui设置的点击全屏退出全屏的按钮使用集成gui可以快速的加快我们的开发速度