【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>

  • 10
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

有只老羊在发呆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值