Three.js——learn04

简明编程

于 2023-03-20 17:51:21 发布

阅读量223

点赞数 1

CC 4.0 BY-SA版权

分类专栏：笔记前端文章标签： javascript 前端开发语言 threejs

本文链接：https://blog.csdn.net/qq_51553982/article/details/129669855

本文介绍了如何在Three.js中利用dat.gui库进行参数动态调整，包括物体位置、颜色以及创建管理组。同时，通过BufferGeometry设置点来构建图形，以及通过循环生成随机三角形集合，展示了OrbitControls实现相机轨道控制的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Three.js——learn04

Three.js——learn04

Three.js——learn04

通过dat.gui动态调整

通过使用dat.gui可以动态调整视图

安装

npm install dat.gui

导入

//导入dat.gui
import * as dat from 'dat.gui'

使用

修改基础属性

//创建GUI
const gui = new dat.GUI()
gui
  .add(cube.position, 'x')
  .min(0)
  .max(4)
  .step(0.05)
  .name('x轴坐标')
  .onChange(value => {
   
   
    console.log(value)
  })
  .onFinishChange(value => {
   
   
    console.log(value)
  })

在这里插入图片描述

修改颜色

const param = {
   
   
  color: '#ff00ff'
}
gui.addColor(param, 'color').onChange(value => {
   
   
  cube.material.color.set

最低0.47元/天解锁文章

200万优质内容无限畅学