threejs的dat.gui辅助工具的使用

threejs的dat.gui辅助工具的使用

安装

npm i dat.gui -S

使用

c 复制代码
import dat from 'dat.gui'
const controlData = {
    rotationSpeed: 0.01,
    color: '#66ccff',
    wireframe: false
}
const gui = new dat.GUI()
const f = gui.addFolder('配置')
f.add(controlData, 'rotationSpeed', 0.01, 0.1, 0.01)
f.addColor(controlData, 'color')
f.add(controlData, 'wireframe')
f.domElement.id = 'gui'
f.open()//open开启
...省略中间代码
//记住一定要在3d渲染前添加否则无效
dom.appendChild(f.domElement) //添加3d中
dom.appendChild(renderer.domElement)


//将gui与3d相关联起来controlData是gui的自定义对象属性

  function animate() {
                requestAnimationFrame(animate)
                cube.rotation.x += controlData.rotationSpeed
                // cube.rotation.x += 0.01
                cube.material.color = new THREE.Color(controlData.color)
                material.wireframe = controlData.wireframe
                controls.update()
                renderer.render(scene, camera)
            }
相关推荐
六卿24 天前
1、Three.js开端准备环境
javascript·three.js·three
六卿24 天前
2、Three.js初步认识场景Scene、相机Camera、渲染器Renderer三要素
javascript·three.js·three
优雅永不过时·1 个月前
Three.js 原生 实现 react-three-fiber drei 的 磨砂反射的效果
前端·javascript·react.js·webgl·threejs·three
优雅永不过时·2 个月前
three.js 实现 css2d css3d效果 将 二维Dom 和 三维场景结合
前端·javascript·css3·threejs·three
优雅永不过时·2 个月前
Three.js 使用着色器 实现跳动的心
前端·javascript·webgl·threejs·three·着色器·1024程序员节
爷傲奈我何!2 个月前
Threejs 实现3D 地图(04)3d 地图的柱状图和文字显示
vue.js·3d·three
爷傲奈我何!2 个月前
Threejs 实现3D 地图(02)创建3d 地图
vue.js·3d·three
优雅永不过时·2 个月前
three.js 实现一个心形的着色器
前端·javascript·3d·shader·three·着色器
优雅永不过时·3 个月前
使用three.js 实现着色器草地的效果
前端·javascript·智慧城市·webgl·three·着色器
Ian10253 个月前
使用three.js+vue3完成无人机上下运动
开发语言·前端·javascript·vue.js·无人机·three