使用GUI工具
使用：借助 dat.gui 库实现
- 下载并引入 dat.gui
- 创建 GUI 对象
- 添加具体控制器
首先下载
npm i dat.gui
<template>
<div></div>
</template>
<script setup>
import { onMounted } from "vue";
// 引入TREE.js
import * as THREE from "three";
// 引入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as dat from "dat.gui";
// 创建TREE.js三要素
let scene, camera, renderer;
// 轨道控制器
let controls;
let cube;
onMounted(() => {
// 初始化
init();
// 创建立方体
createCube();
// 创建轨道控制器
controlsCreate();
// 创建渲染更新函数
renderLoop();
// 创建GUI工具对象
createGui();
// 创建坐标轴
createHelper();
// 适配场景大小
renderResize();
// 移动立方体
// moveCube();
});
// 进行初始化
const init = () => {
scene = new THREE.Scene();
/*下面这个函数的四个参数分别代表着：
1.垂直角度（建议75），视野范围
2.宽高比 物体绘制比例
3.进截面距离摄像机的距离
4.远截面距离摄像机的距离
*/
camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
renderer = new THREE.WebGLRenderer({ antialias: true });
// 设置画布的大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 把画布 canvas标签添加到页面上
document.body.append(renderer.domElement);
// 传入场景和摄像机，渲染画面
};
// 2.创建立方体
const createCube = () => {
// 1.创建图形，宽高深都为1单位（立体缓冲几何体）
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 2.创建材质 颜色为绿色
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
// 3. 创建网格外物体对象，传入图形和材质（网格物体对象）
cube = new THREE.Mesh(geometry, material);
// 4.把物体加入到场景中
scene.add(cube);
// 如果你想看见创建的立方体，需要把摄像机向z轴移动移动距离才可以看到
camera.position.z = 7;
};
// 3.创建轨道控制器
const controlsCreate = () => {
controls = new OrbitControls(camera, renderer.domElement);
};
// 创建渲染更新函数
const renderLoop = () => {
renderer.render(scene, camera);
controls.update();
requestAnimationFrame(renderLoop);
};
// 创建坐标轴
const createHelper = () => {
// 1. 创建坐标轴对象，设置长度
const axesHelper = new THREE.AxesHelper(5);
// 2. 添加到场景中
scene.add(axesHelper);
};
// 适配场景大小
const renderResize = () => {
window.addEventListener("resize", () => {
// 2. 调整渲染器画布大小，摄像机宽高比和更新视椎体空间
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
};
const moveCube = () => {
// 1. 位移 position 属性（Vector3 三维向量对象）
// cube.position.x = 5
cube.position.set(5, 0, 0);
// 2. 旋转 rotation 属性（Euler 欧拉角弧度制角度对象）
// 在轴的正方向看是逆时针旋转
cube.rotation.x = Math.PI / 4;
// 3. 缩放 scale 属性（Vector3 三维向量对象，中心原点不动，向 2 边拉伸/缩小）
// cube.scale.z = 2
};
// 创建GUI对象
const createGui = () => {
// 创建GUI对象
const gui = new dat.GUI();
// 添加具体的控制器使用
/*gui.add方法的两个参数
参数1:关联的DOM 对象，js对象，3D物体对象
参数2: 对象中的某个属性，给这个属性关联用户界面工具(从而快速调整它的值)
*/
gui.add(document, "title");
// 控制立方体显示/隐藏（布尔值 --> 多选框）
gui.add(cube, "visible");
// 控制轨道控制器回归初始角度（函数 --> 按钮）
gui.add(controls, "reset");
// 控制轨道控制器自动旋转
gui.add(controls, "autoRotate");
// 控制立方体的颜色
const colorObj = {
col: `#${cube.material.color.getHexString()}`,
};
gui.addColor(colorObj, "col").onChange((val) => {
cube.material.color = new THREE.Color(val);
});
};
</script>
<style lang="scss" scoped></style>
