【Three】基于vue使用three.js集成gui

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可以快速的加快我们的开发速度

下面是script的源代码

//1.导入 
import * as THREE from 'three'
//引入轨道控制器
import {OrbitControls} from 'three/addons/controls/OrbitControls.js'
//导入lil.gui
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";


//2.创建场景
const scence = new THREE.Scene() 
//6.创建立方体 几何➕材质
const cubeGeometry = new THREE.BoxGeometry(2,2,2)
const cubeMaterial = new THREE.MeshNormalMaterial()
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)

//创建父元素
const parentMaterial = new THREE.MeshBasicMaterial({color: 0xffffff })
const parentCube = new THREE.Mesh(cubeGeometry, parentMaterial)
scence.add(parentCube)
parentCube.position.set(2,2,4)
parentCube.scale.set(2,1,4)
parentCube.add(cube)
//3.创建相机
const camera = new THREE.PerspectiveCamera(
    45, 
    window.innerWidth/window.innerHeight,
    1,
    1000
)
camera.position.set(20,20,20)
camera.lookAt(0,0,0)

//7. 创建坐标系辅助对象
const axesHelper = new THREE.AxesHelper(10) 
scence.add(axesHelper)

cube.position.set(3,0,4)
cube.rotation.x = Math.PI / 4
parentCube.rotation.x = Math.PI / 4

//10，创建网格辅助对象
const gridHelper = new THREE.GridHelper(20,20,0xffffff, 0xffffff)
gridHelper.material.transparent = true //透明度
gridHelper.material.opacity = 0.5
scence.add(gridHelper)




//4.创建渲染器
const renderer = new THREE.WebGL1Renderer({ antialias: true})   
renderer.setSize( window.innerWidth, window.innerHeight)
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setAnimationLoop(animation)
document.body.appendChild(renderer.domElement)
//5.渲染  
function animation() {
    renderer.render(scence, camera) 
}


//8.创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
//设置带阻力惯性 
controls.enableDamping = true;
//设置阻力系数
controls.dampingFactor = 0.05
//设置旋转速度
console.autoRotate = true

//9.监听window的resize事件
window.addEventListener('resize', ()=> {
      //重新设置相机宽高比
      camera.aspect = window.innerWidth / window.innerHeight
      //更新相机投影取证
      camera.updateProjectionMatrix()

      //设置渲染器出图  照片大小
      renderer.setSize(window.innerWidth, window.innerHeight)
})

//点击全屏 退出全屏
// var btn = document.createElement("button");
// btn.innerHTML = "点击全屏"
// btn.style.position = "absolute"
// btn.style.top = "10px"
// btn.style.left = "10px"
// btn.style.zIndex = "999"
// btn.onclick = function(){
//   document.body.requestFullscreen()
// }
// document.body.appendChild(btn)

// var exitbtn = document.createElement("button");
// exitbtn.innerHTML = "退出全屏"
// exitbtn.style.position = "absolute"
// exitbtn.style.top = "10px"
// exitbtn.style.left = "150px"
// exitbtn.style.zIndex = "999"
// exitbtn.onclick = function() {
//   document.exitFullscreen()
// };
// document.body.appendChild(exitbtn)

//点击全屏 退出全屏 使用gui
let eventObj = {
  Fullscreen: function() {
    document.body.requestFullscreen()
  },
  ExitFullscreen: function() {
    document.exitFullscreen()
  }
}

//创建gui
const gui = new GUI()
//添加按钮  将创建对象的以及对象设计函数最为参数
gui.add(eventObj, "Fullscreen")
gui.add(eventObj, "ExitFullscreen")

`