【基础】Three.js中添加操作面板,GUI可视化调试(附案例代码)

2024-08-29 09:04

本文主要是介绍【基础】Three.js中添加操作面板,GUI可视化调试(附案例代码),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在这里插入图片描述

1.先引入GUI库:

import { GUI } from "three/addons/libs/lil-gui.module.min.js";

2.实例化gui对象,并添加需要显示的参数:

  // 实例化一个gui对象const gui = new GUI();//设置操作面板位置gui.domElement.style.right = "0px";gui.domElement.style.width = "300px";//将 mesh位置添加到gui内,就可以可视化操作了gui.add(mesh.position, "x", 0, 180);gui.add(mesh.position, "y", 0, 180);gui.add(mesh.position, "z", 0, 180);//添加光照强度,并使用name重命名,step设置步长gui.add(directionalLight, "intensity", 0, 2.0).name("平行光强度").step(0.1);// 添加颜色gui.addColor({color: 0xff0000,},"color").onChange(function (value) {mesh.material.color.set(value);});

3.分组

  // 创建分组const posFolder = gui.addFolder("位置");// 设置初始状态posFolder.open();//将 mesh位置添加到分组内posFolder.add(mesh.position, "x", 0, 180);posFolder.add(mesh.position, "y", 0, 180);posFolder.add(mesh.position, "z", 0, 180);

案例代码:

<template><div class="wrapper"><div ref="threeRef"></div></div>
</template>
<script setup lang="ts">
// 引入three.js
import * as THREE from "three";
// 引入扩展库OrbitControls.js
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
// 引入dat.gui.js的一个类GUI
import { GUI } from "three/addons/libs/lil-gui.module.min.js";import { onMounted, ref } from "vue";
const threeRef = ref();const init = () => {//! 1.创建场景// 创建3D场景对象Sceneconst scene = new THREE.Scene();// 设置场景颜色scene.background = new THREE.Color("#c1c5d8");// 创建一个长宽高为10的长方体几何对象Geometryconst geometry = new THREE.BoxGeometry(10, 10, 10);// 模拟镜面反射,产生一个高光效果const material = new THREE.MeshPhongMaterial({color: 0xff0000,shininess: 20, //高光部分的亮度,默认30specular: 0x444444, //高光部分的颜色});//  创建网格模型Mesh,可以将它看成一个虚拟物体const mesh = new THREE.Mesh(geometry, material);// 设置网格模型在三维空间中的位置坐标,默认是坐标原点mesh.position.set(0, 10, 0);// 将模型添加到场景中scene.add(mesh);//! 2.创建相机// 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000:远裁截面const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,1,3000);camera.position.set(0, 0, 20); // 相机位置camera.lookAt(mesh.position); //指向mesh对应的位置// !AxesHelper:辅助观察的坐标系const axesHelper = new THREE.AxesHelper(50);scene.add(axesHelper);// !3.创建渲染器// 创建渲染器对象const renderer = new THREE.WebGLRenderer({antialias: true, // 设置锯齿属性,为了获得更好的图像质量});// 定义threejs输出画布的尺寸(单位:像素px)renderer.setSize(window.innerWidth, window.innerHeight);// 为了适应不同的硬件设备屏幕,设置设备像素比renderer.setPixelRatio(window.devicePixelRatio);// 插入到任意HTML元素中threeRef.value.append(renderer.domElement);//执行渲染操作renderer.render(scene, camera);// !添加光源// 平行光const directionalLight = new THREE.DirectionalLight(0xffffff, 1);// 设置光源的方向:通过光源position属性和目标指向对象的position属性计算directionalLight.position.set(80, 100, 50);// 方向光指向对象网格模型mesh,可以不设置,默认的位置是0,0,0directionalLight.target = mesh;// 将光源添加到场景中scene.add(directionalLight);// !设置相机控件轨道控制器const controls = new OrbitControls(camera, renderer.domElement);// 如果OrbitControls改变了相机参数,重新调用渲染器渲染三维场景controls.addEventListener("change", function () {renderer.render(scene, camera); //执行渲染操作}); //监听鼠标、键盘事件// !  创建循环动画,使物体可以动起来function rotateRender() {renderer.render(scene, camera); //执行渲染操作mesh.rotateY(0.01); //每次绕y轴旋转0.01弧度requestAnimationFrame(rotateRender); //请求再次执行渲染函数render,渲染下一帧}rotateRender();// !添加操作面板// 实例化一个gui对象const gui = new GUI();//设置操作面板位置gui.domElement.style.right = "0px";gui.domElement.style.width = "300px";// 创建子菜单const posFolder = gui.addFolder("位置");// 设置初始状态posFolder.open();// 将 mesh位置添加到分组内posFolder.add(mesh.position, "x", 0, 180);posFolder.add(mesh.position, "y", 0, 180);posFolder.add(mesh.position, "z", 0, 180);//添加光照强度,并使用name重命名,step设置步长gui.add(directionalLight, "intensity", 0, 2.0).name("平行光强度").step(0.1);// 添加颜色gui.addColor({color: 0xff0000,},"color").name("颜色").onChange(function (value) {mesh.material.color.set(value);});// !处理窗口大小调整window.onresize = function () {// 更新相机纵横比camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();// 更新渲染器的大小renderer.setSize(window.innerWidth, window.innerHeight);};
};onMounted(() => {init();
});
</script>
<style scoped></style>

🔍【基础】Three.js的零基础入门篇(附案例代码)

这篇关于【基础】Three.js中添加操作面板,GUI可视化调试(附案例代码)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1117439

相关文章

Python实现MQTT通信的示例代码

《Python实现MQTT通信的示例代码》本文主要介绍了Python实现MQTT通信的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 安装paho-mqtt库‌2. 搭建MQTT代理服务器(Broker)‌‌3. pytho

MySQL进行数据库审计的详细步骤和示例代码

《MySQL进行数据库审计的详细步骤和示例代码》数据库审计通过触发器、内置功能及第三方工具记录和监控数据库活动,确保安全、完整与合规,Java代码实现自动化日志记录,整合分析系统提升监控效率,本文给大... 目录一、数据库审计的基本概念二、使用触发器进行数据库审计1. 创建审计表2. 创建触发器三、Java

Ubuntu 24.04启用root图形登录的操作流程

《Ubuntu24.04启用root图形登录的操作流程》Ubuntu默认禁用root账户的图形与SSH登录,这是为了安全,但在某些场景你可能需要直接用root登录GNOME桌面,本文以Ubuntu2... 目录一、前言二、准备工作三、设置 root 密码四、启用图形界面 root 登录1. 修改 GDM 配

MySql基本查询之表的增删查改+聚合函数案例详解

《MySql基本查询之表的增删查改+聚合函数案例详解》本文详解SQL的CURD操作INSERT用于数据插入(单行/多行及冲突处理),SELECT实现数据检索(列选择、条件过滤、排序分页),UPDATE... 目录一、Create1.1 单行数据 + 全列插入1.2 多行数据 + 指定列插入1.3 插入否则更

JSONArray在Java中的应用操作实例

《JSONArray在Java中的应用操作实例》JSONArray是org.json库用于处理JSON数组的类,可将Java对象(Map/List)转换为JSON格式,提供增删改查等操作,适用于前后端... 目录1. jsONArray定义与功能1.1 JSONArray概念阐释1.1.1 什么是JSONA

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数

Java操作Word文档的全面指南

《Java操作Word文档的全面指南》在Java开发中,操作Word文档是常见的业务需求,广泛应用于合同生成、报表输出、通知发布、法律文书生成、病历模板填写等场景,本文将全面介绍Java操作Word文... 目录简介段落页头与页脚页码表格图片批注文本框目录图表简介Word编程最重要的类是org.apach

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os

mysql表操作与查询功能详解

《mysql表操作与查询功能详解》本文系统讲解MySQL表操作与查询,涵盖创建、修改、复制表语法,基本查询结构及WHERE、GROUPBY等子句,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随... 目录01.表的操作1.1表操作概览1.2创建表1.3修改表1.4复制表02.基本查询操作2.1 SE