当前位置: 首页 > article >正文

【Threejs】从零开始(六)--GUI调试开发3D效果

请先完成前置步骤再进行下面操作:【Threejs】从零开始(一)--创建threejs应用-CSDN博客

一.GUI界面概述

GUI(Graphical User Interface)指的是图形化用户界面,广泛用在各种程序的上位机,能够通过简单的操作和按钮就可以调用底层代码,方便我们使用和展示结果。写好了底层的代码后我们就可以制作一个GUI界面来打包和展示。

简单来说就是功能的一个集合模块。

二.GUI的简单使用

1.导入GUI

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

2.创建GUI

const gui = new GUI();

3.控制立方体位置的控制器

gui.add(cube.position, 'x', 最小值,最大值, 步数).name('立方体X位置');

onFinishChange是当你滑动结束时执行一次函数,可以输出滑动的结果。

onChange是数值改变时执行一次函数,可以输出滑动的结果。

//控制立方体位置
gui.add(cube.position, 'x', -5, 5, 1).name('立方体X位置');
gui.add(cube.position, 'y', -5, 5, 1).name('立方体Y位置').onFinishChange((val) => {
  console.log('立方体Y位置',val)
})
;
gui.add(cube.position, 'z', -5, 5, 1).name('立方体Z位置').onChange((val) => {
  console.log('立方体Z位置',val)
})
;

4.添加文件夹(归类)

通过addFolder()方法可以将同一类型的放到同一个文件下,方便管理。

//创建文件夹
let folder = gui.addFolder('立方体位置');
//控制立方体位置
folder.add(cube.position, 'x', -5, 5, 1).name('立方体X位置');
folder.add(cube.position, 'y', -5, 5, 1).name('立方体Y位置').onFinishChange((val) => {
  console.log('立方体Y位置',val)
});
folder.add(cube.position, 'z', -5, 5, 1).name('立方体Z位置').onChange((val) => {
  console.log('立方体Z位置',val)
});

5.调用方法

比如想实现全屏展示和退出全屏。

先创建个数组:

let eventObject = {
  fullscreen:function(){
    document.body.requestFullscreen()
  },
  exitFullscreen:function(){
    document.exitFullscreen()
  },
}

调用:

// 创建gui
const gui = new GUI();
gui.add(eventObject,'fullscreen').name('全屏')
gui.add(eventObject,'exitFullscreen').name('退出全屏')

比如控制立方体颜色:

//控制立方体颜色
let colorParms = {
  color: 0x00ff00
}
folder.addColor(colorParms, 'color').name('立方体颜色').onChange((val) => {
  cube.material.color.set(val)
})

控制立方体材质:

//控制立方体材质
folder.add(parentMaterial,'wireframe' ).name('父元素立方体材质');


http://www.kler.cn/a/448834.html

相关文章:

  • NACA四位数字翼型
  • Java爬虫获取1688 item_search_img接口详细解析
  • C++中的模板元编程
  • Debian11 安装MYSQL8 签名错误
  • [Unity Shader][图形渲染] Shader数学基础11 - 复合变换详解
  • 单元测试mock框架Mockito
  • C05S13-MySQL数据库备份与恢复
  • 运用软件开发的三层结构创建图书馆查书
  • STM32-KEIL5中相关设置
  • vue 文本域 展示的内容格式要和填写时保持一致
  • 「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台
  • ctf中遇到exec和shell_exec的回显问题
  • 基于SpringBoot的“家具销售电商平台”的设计与实现(源码+数据库+文档+PPT)
  • Stream流的使用
  • 【Python 】循环
  • matplotlib中文字体 graphviz中文字体
  • 基于WCF(C#)+SQL SERVER设计与实现的在线评测系统
  • 前端获取excel表格数据并在浏览器展示
  • Java设计模式 —— 【结构型模式】桥接模式详解
  • linux下蓝牙调试工具hcitool的使用
  • 【git】开发中分支使用原则与流程
  • 详解redis哨兵(高可用)
  • Python面试常见问题及答案12
  • basic_ios及其衍生库(附 GCC libstdc++源代码)
  • 17.springcloud_openfeign之扩展组件一
  • 生产制造管理系统:现代制造业的智能引擎