threejs ~GUI工具的使用

Dat.gui 是一个 GUI 组件,他可以为你的 demo 提供参数的设置

先看一下想实现的效果

美观又实用 下边我们来简单实现下通过gui实现全屏与退出全屏

安装与引入

 npm install --save dat.gui
import * as dat from "dat.gui";

实例化对象 

const gui = new dat.GUI(); //可传递参数{ closed:true ,width:400 }

封装一个对象方法


let eventObj = {fullScreen: function () {document.body.requestFullscreen();},ExitFullscreen: function () {document.exitFullscreen();},
};

然后gui直接添加就OK了

gui.add(eventObj, "fullScreen").name("全屏");
gui.add(eventObj, "ExitFullscreen").name("退出全屏");

就实现上边那个效果了 点击全屏就展示全屏  点击退出全屏就退出全屏

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3226942.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

蚓链数字化营销策略的特点:精准营销

(一)数据驱动的精准营销 蚓链数字化营销能够基于大数据分析,深入了解消费者的行为、兴趣和需求,实现精准的客户画像和细分。通过对用户数据的挖掘和分析,企业可以准确地定位目标客户群体,制定个性化的营销…

ITIL4认证考试注意事项(附考试答题攻略)

作为一位持有ITIL4中级认证的IT服务管理专家,我深知备考ITIL4认证考试的重要性。在此分享我的复习备考经验,帮助你顺利通过考试。 1. 制定复习计划 制定详细的复习计划是备考的第一步。合理安排每天的复习时间,重点复习ITIL4的关键概念、四个…

数据结构--二叉树相关性质

1.性质 1.满二叉树每层节点个数:等比数列 3.(重要)任意二叉树:度为0(叶子节点)的比度为2的永远多一个。。度:就是看有多少孩子 如下图解析:(用推到归纳来分析&#xff…

1996-2023年各省农业总产值数据(无缺失)

1996-2023年各省农业总产值数据(无缺失) 1、时间:1996-2023年 2、来源:国家统计局、各省年鉴 3、指标:农业总产值 4、范围:31省 5、缺失情况:无缺失 6、指标解释:农业总产值是…

100359.统计X和Y频数相等的子矩阵数量

1.题目描述 给你一个二维字符矩阵 grid,其中 grid[i][j] 可能是 X、Y 或 .,返回满足以下条件的子矩阵数量: 包含 grid[0][0]X 和 Y 的频数相等。至少包含一个 X。 示例 1: 输入: grid [["X","Y",…

MT3054 搭积木

1.思路&#xff1a; 把二维矩阵转化成一维编号&#xff0c;之后将编号使用并查集&#xff0c;看最后是否在同一个集合中即可。 2.代码&#xff1a; #include <bits/stdc.h> using namespace std; const int N 1e3 10; int n, m, cnt, root; int fa[N * N]; int dx[…

html5——表单

目录 表单基本结构 表单标签 常用表单元素 文本框 密码框 邮箱 单选按钮 复选框 文件域 隐藏域 列表框 多行文本域 lable标签 表单按钮 常用表单属性 只读与禁用 placeholder required pattern autofocus autocomplete 用于指定表单是否有自动完…

STM32串口通讯(RS232、RS485、TTL)详解

前言 STM32串口&#xff08;Serial Communication Interface&#xff09;是STM32微控制器中用于串行通信的接口&#xff0c;通常指的是USART&#xff08;通用同步异步收发器&#xff09;或UART&#xff08;通用异步收发传输器&#xff09;。这些接口允许STM32微控制器与其他设…

防火墙安全策略与用户认证综合实验

一、实验拓扑 二、实验需求 1.DMZ区内的服务器&#xff0c;办公区仅能在办公时间内<9:00-18:00>可以访问&#xff0c;生产区的设备全天可以访问 2.办公区不允许访问互联网&#xff0c;办公区和游客区允许访问互联网 3.办公区设备10.0.2.10不充许访问DMZ区的FTP服务器和HT…

昇思学习打卡-14-ResNet50迁移学习

文章目录 数据集可视化预训练模型的使用部分实现 推理 迁移学习&#xff1a;在一个很大的数据集上训练得到一个预训练模型&#xff0c;然后使用该模型来初始化网络的权重参数或作为固定特征提取器应用于特定的任务中。本章学习使用的是前面学过的ResNet50&#xff0c;使用迁移学…

数字人+展厅互动体验方案:多元化互动方式,拓宽文化文娱新体验

数字化创新已成为推动展厅可持续发展&#xff0c;创造全新消费体验&#xff0c;满足游客多元化需求的关键力量。 “数字人数字互动展厅”可以适应年轻一代的文化传播与多媒体互动新体验趋势&#xff0c;打造新生代潮玩聚集地&#xff0c;促进文化创意传播与互动体验场景创新&a…

手机回收站视频过期怎么恢复?跟随这2个方法解锁新技能

各位看官&#xff0c;是不是有时候一不留神&#xff0c;手机里的珍贵视频就不翼而飞了&#xff1f;然后你疯狂地寻找&#xff0c;心里五味杂陈&#xff0c;就像热锅上的蚂蚁一样团团转。视频过期怎么恢复&#xff0c;到底怎样才能找回来呢&#xff1f;别担心&#xff0c;今天小…

进程和线程(简单篇)

1.进程的概念 进程&#xff08;Process&#xff09;是计算机中的一个实体&#xff0c;是具有一定独立功能的程序关于某个数据集合上的一次运行活动&#xff0c;也是系统进行资源分配和调度的一个独立单元。进程是程序在处理机上的一次执行过程&#xff0c;具有生命周期&#x…

react学习——24redux实现求和案例(精简版)

1、目录结构 2、count/index.js import React, {Component} from "react"; //引入store,用于获取数据 import store from ../../redux/store export default class Count extends Component {state {count:store.getState()}componentDidMount() {//监测redux中的…

推荐一款功能强大的 GPT 学术优化开源项目GPT Academic:学术研究的智能助手

今天&#xff0c;我将向大家介绍一个强大的开源项目—GPT Academic&#xff0c;它或许正是你一直在寻找的理想工具。 已一跃成为 60.4k Star 的热门项目 GPT Academic 目前在 GitHub 上已经揽获了 60.4k 的 Star&#xff0c;这不仅反映了它的受欢迎程度&#xff0c;更证明了它…

初阶C++(三)

初阶C(三&#xff09; 指针和引⽤的关系inline介绍对inline的运用宏函数与inline关系nullptr NULL在C中有歧义nullptr引用 指针和引⽤的关系 C中指针和引⽤就像两个性格迥异的亲兄弟&#xff0c;指针是哥哥&#xff0c;引⽤是弟弟&#xff0c;在实践中他们相辅相成&#xff0c;…

【堆 优先队列】1354. 多次求和构造目标数组

本文涉及知识点 堆 优先队列 LeetCode1354. 多次求和构造目标数组 给你一个整数数组 target 。一开始&#xff0c;你有一个数组 A &#xff0c;它的所有元素均为 1 &#xff0c;你可以执行以下操作&#xff1a; 令 x 为你数组里所有元素的和 选择满足 0 < i < target.…

《财经态度》︱行业领跑品牌格行创始人刘永先独家揭秘:格行随身WiFi如何抗内卷,成就品质与服务双重骄傲?随身WiFi推荐第一名!

近两年人们对无线连接的需求急剧增加&#xff0c;特别是在旅行、出差、户外活动等场景下&#xff0c;随身WiFi以其便捷性、高效性和广泛适应性&#xff0c;成为满足这一需求的理想选择。随之而来的&#xff0c;随身WiFi竞争也日益激烈。众多厂商纷纷涌入&#xff0c;通过技术创…

Windows 下安装 Memcached

Memcached 安装包下载 官网上并未提供 Memcached 的 Windows 平台安装包。 我们可以使用以下链接来下载&#xff0c;你需要根据自己的系统平台及需要的版本号点击对应的链接下载即可&#xff1a; 32位系统 1.2.5版本&#xff1a;http://static.jyshare.com/download/memcache…

【Vue3】使用vite创建vue项目

一、安装Nodejs 参考文章https://blog.csdn.net/DX390609/article/details/140305585?spm1001.2014.3001.5502 二、创建项目 在要创建的目录下打开命令行输入&#xff1a; npm create vuelatestvue项目创建成功&#xff1a; 三、安装vue插件 vscode打开项目文件夹&…