three.js 之 入门篇4 之 dat.gui

• 安装：npm install --save dat.gui
• 导入：import * as gui from "dat.gui";

011 应用图形用户界面更改变量

import * as THREE from "three"
// console.log('main.js',THREE);

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// gsap 1-1:导入动画库
import gsap from "gsap"
// 导入 dat.gui
import * as dat from "dat.gui"

// 1：创建场景
const scene = new THREE.Scene()

// 2：创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/ window.innerHeight,0.1,1000)
// 设置相机位置 x y z
camera.position.set(0,0,10) 
// 把相机添加到场景之中
scene.add( camera );

// 添加物体
// 创建几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 盒子的大小
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体创建物体
const mesh = new THREE.Mesh( geometry, material ); // 几何体 几何体的材质
// 将几何体添加到场景之中
scene.add( mesh );
// 07-2 几何体的旋转
mesh.rotation.set( Math.PI / 4 , 0,0,'XYZ') // 旋转45度 XYZ表示的是，先旋转那个轴

// 011-1 应用图形用户界面更改变量 start
const gui=new dat.GUI();
gui.add(mesh.position,"x").min(0).max(5).step(0.5).name('移动x轴坐标')
.onChange((value)=>{
  console.log('移动时的值',value);
}).onFinishChange((value)=>{
  console.log('完全停下来',value);
})
// 011-2 修改物体颜色
const params = {
  color:'#ffff00',
  fn:()=>{
    // 点击的时候 让立方体运动起来
    gsap.to(mesh.position,{x:5,duration:2,yoyo:true,repeat:-1})
  }
}
gui.addColor(params,'color').onChange((value)=> {
  // console.log("修改物体颜色",value);
  mesh.material.color.set(value) 
})
gui.add(mesh,'visible').name('是否显示几何体')
// 设置按钮点击出发某个事件
gui.add(params,"fn").name('点击立方体')
// 设置立方体的文件夹
var folder = gui.addFolder('设置立方体')
folder.add(mesh.material,"wireframe") // 以线呈现几何体（ 没有填充颜色 ）
folder.add(params,"fn").name('点击立方体')


// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// console.log('renderer',renderer);
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)
// 011 应用图形用户界面更改变量 end

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 设置控制器阻尼，让控制器更具有真是效果
controls.enableDamping = true
// 06-1：添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// window双击事件的时候 
window.addEventListener('dblclick',()=>{
  // 010 调研js接口控制画布全屏和退出全屏
  const fullScreenElement = document.fullscreenElement;
  if ( !fullScreenElement ) {
    renderer.domElement.requestFullscreen() // 画布对象全屏
  } else {
    document.exitFullscreen()
  }
})

// 渲染函数 - 每一帧渲染一次
function animate() {
  // 渲染下一帧 的时候 会调用 animate 函数
	requestAnimationFrame( animate );
	controls.update();
	renderer.render( scene, camera );
}
animate()

// 09 根据尺寸变化实现自适应画面
// 监听画面变化，更新渲染画面
window.addEventListener('resize',()=>{
  console.log('监听画面变化');
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新摄像头的头部矩阵
  camera.updateProjectionMatrix()
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})