three.js学习（第二天）之阻尼+自适应+js全屏

添加阻尼效果

// 加载轨道控制器
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
// 设置控制器阻尼，让控制器更具有真实效果,必须在动画循环里调用.update()
controls.enableDamping = true;

function render() {
  controls.update()
  renderer.render(scene, camera)
  // 渲染下一帧的时候就会调节render函数
  requestAnimationFrame(render)
}
render()

根据尺寸自适应

// 监听画面变化，更新渲染画面
window.addEventListener('resize',()=>{
  // 更新摄像头
  camera.aspect = window.innerWidth/window.innerHeight;
  // 更新摄像机的投影矩阵
  camera.updateProjectionMatrix();
  // 更新渲染器
  renderer.setSize(window.innerWidth,window.innerHeight);
  // 更新渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
})

利用js控制画布是否全屏

window.addEventListener('dblclick', () => {
  // 双击实现进入、退出全屏
  const fullscreenElement = document.fullscreenElement
  if (fullscreenElement) {
    //文档对象退出全屏
    document.exitFullscreen();
  } else {
    // 画布对象请求全屏
    renderer.domElement.requestFullscreen();

  }
})