目录
前言：
参考文档：
实现
1、安装
2、声明
3、引入使用
前言：
前面学习了three.js物体的动画展示，接下来学习应用图形界面更改变量
目标、页面提供操作区域进行变量修改
参考文档：
dat.gui - npmA lightweight graphical user interface for changing variables in JavaScript.. Latest version: 0.7.9, last published: a year ago. Start using dat.gui in your project by running `npm i dat.gui`. There are 216 other projects in the npm registry using dat.gui.
https://www.npmjs.com/package/dat.gui
实现
1、安装
npm install --save dat.gui
或者
yarn add dat.gui
2、声明
在env.d.ts同级目录下创建dat.gui.d.ts
declare module 'dat.gui'
3、引入使用
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
// 导入gui
import * as dat from 'dat.gui'
import gsap from 'gsap'
const container = ref<HTMLDivElement>()
// 创建场景
const scene = new THREE.Scene()
// 创建相机对象
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
)
// 设置相机位置
camera.position.set(0, 0, 10)
scene.add(camera)
// 添加物体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 })
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
// 修改元素位置
// cube.position.x = 2
// 缩放
// cube.scale.x = 2
// 旋转
cube.rotation.set(Math.PI / 4, 0, 0, 'XYZ')
// 将几何体添加到场景中
scene.add(cube)
// 初始化渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setClearColor(new THREE.Color(0xeeeeee))
// 设置three.js渲染区域的尺寸(像素px)
renderer.setSize(window.innerWidth, window.innerHeight)
// 创建控制器
const controls = new OrbitControls(camera, renderer.domElement)
// 坐标轴
const axesHelper = new THREE.AxesHelper(10)
scene.add(axesHelper)
// 监听页面变化
window.addEventListener('resize', () => {
// 更新摄像头
camera.aspect = window.innerWidth / window.innerHeight
// 更新摄像机的投影矩阵
camera.updateProjectionMatrix()
// 更新渲染器
renderer.setSize(window.innerWidth, window.innerHeight)
// 设置渲染器的像素比
renderer.setPixelRatio(window.devicePixelRatio)
})
// 监听事件，双击暂停
window.addEventListener('dblclick', () => {
if (document.fullscreenElement === null) {
renderer.domElement.requestFullscreen()
} else {
document.exitFullscreen()
}
})
// 设置动画
const animatel = gsap.to(cube.position, {
x: 5,
duration: 5,
// 设置重复次数
repeat: -1,
// 设置往返运动
// 延迟两秒
delay: 2,
yoyo: true,
onComplete: () => {
console.log('动画完成')
},
onStart: () => {
console.log('动画开始')
}
})
const gui = new dat.GUI()
// 修改物体位置
gui
.add(cube.position, 'x')
.min(0)
.max(5)
.step(0.01)
.name('移动X轴')
.onChange((value: any) => {
console.log(value)
})
.onFinishChange((value: any) => {
console.log(value)
})
// 修改物体颜色
const params = {
color: '#ffff00',
fn: () => {
if (animatel.isActive()) {
animatel.pause()
} else {
animatel.resume()
}
}
}
gui.addColor(params, 'color').onChange((value: any) => {
cube.material.color.set(value)
})
// 设置物体的显示隐藏
gui.add(cube, 'visible').name('是否显示')
// 设置按钮点击触发事件
gui.add(params, 'fn').name('物体运动')
// 设置文件夹
const folder = gui.addFolder('设置立方体')
folder.add(cube.material, 'wireframe')
// 渲染
const render = () => {
controls.update()
renderer.render(scene, camera) // 执行渲染操作
requestAnimationFrame(render)
}
onMounted(() => {
container.value?.appendChild(renderer.domElement)
render()
})
</script>
<template>
<div ref="container" class="container"></div>
</template>
<style scoped lang="scss">
.container {
height: 100%;
width: 100%;
}
</style>
