ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

three.js结合vue

2026/9/4 3:02:58 拓冰建站 浏览量
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可以快速的加快我们的开发速度

请添加图片描述
请添加图片描述