【threejs教程12】threejs添加GUI控制工具

        在进行基于 Three.js 的 3D 图形开发时，实现用户交互是至关重要的。而 Three.js 提供了一个强大的 GUI 库，可以帮助开发者轻松地创建各种用户界面元素，从而实现交互式的 3D 图形。本文将介绍如何使用 Three.js 的 GUI 库，创建各种用户界面元素，如滑块、按钮、复选框等，以实现对 3D 场景的交互。

GUI重要性

        在3D开发中，频繁调整光照、材质、模型位置等参数是常态。如果没有直观的界面，每次调整都需要手动编辑代码并刷新页面，效率低下。而GUI工具的引入，使得开发者能够在运行时直接修改这些参数，即时预览效果，大大提高了开发效率和灵活性。

引入 GUI 库

首先，我们需要在项目中引入 Three.js 的 GUI 库。可以通过以下方式引入：

import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';

创建 GUI 对象

接下来，我们需要创建一个 GUI 对象

const gui = new GUI();

添加控件

 // 创建一个立方体
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshBasicMaterial({
    color: 0x00f5ff,
    transparent: true,
    opacity: 0.5
  });
 gui.addColor(material, 'color').onChange((color) => {
    material.color.set(color);
  });

       上述代码实现了一个可以控制方块颜色的控件

类似的 我们还可以使用gui控制更多的属性，下面是各种属性举例，当然还有很多其他属性，大家可以去官网查看相关文档

gui.add(cubeParams, 'rotationSpeed', 0, 0.1).name('Rotation Speed'); // 旋转速度滑块
gui.add(cubeParams, 'scale', 0.5, 2).name('Scale'); // 缩放滑块
gui.addColor(cubeParams, 'color').name('Color').onChange(() => {
    cube.material.color.set(cubeParams.color);
}); // 颜色选择器
gui.add(cubeParams, 'wireframe').name('Wireframe').onChange(() => {
    cube.material.wireframe = cubeParams.wireframe;
}); // 复选框控制是否显示线框

完整代码如下

<template>
</template>
<script setup>
import * as THREE from 'three';
import { onMounted, ref, Transition } from 'vue';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
const msg = ref('');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
const controls = new OrbitControls(camera, renderer.domElement);
onMounted(() => {
  init();
});
function init() {
  camera.position.set(0, 0, 20);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  // 创建一个立方体
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshBasicMaterial({
    color: 0x00f5ff,
    transparent: true,
    opacity: 0.5
  });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
  const gui = new GUI();
  gui.addColor(material, 'color').onChange((color) => {
    material.color.set(color);
  });
  function animate() {
    requestAnimationFrame(animate);
    controls.update();

    renderer.render(scene, camera);
  }
  animate();
}
</script>