three.js -- 初始化canvas画布

画布初始化CSS

.canvas {
  margin: 0;
  padding: 0;
  position: fixed;
  left: 0;
  top: 0;
  ouutline: none; //去掉使用控制器canvas的颜色边框
}

canvas画布自适应

当改变窗口大小画布自动改变大小

window.addEventListener('resize', () => {
  // update sizes
  size.width = window.innerWidth;
  size.height = window.innerHeight;
  
  //update camera 改变相机的视锥体长宽比
  camera.aspect = size.width / size.height;
  // 告诉THREE更新相机
  camera.updateProjectionMatrix()
  
  //update renderer
  renderer.setSize(size.width, size.height)
  //设置渲染像素比为屏幕的像素(更清晰，降低锯齿)
  renderer.setPixelRatio(
    window.devicePixelRatio
    <推荐使用这个参数: Math.min(window.devicePixelRatio, 2)>
  )
})

进入全屏模式

通过js的双击屏幕事件

window.addEEventListener('dbclick', () =>{
  // 兼容safari
  const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement;
  
  if(!fullscreenElement){
    console.log('不是全屏, 让canvas进入全屏')
    if(cavas.requestFullscreen){
        canvas.requestFullscreen()
    }else if(canvas.webkitRequestFullscreen){
        canvas.webkitRequestFullscreen()
    }
  }else{
    console.log('全屏, 让doucment退出全屏')
    if(document.exitFullscreen){
    	document.exitFullscreen()
    }else if(document.webkitExitFullscreen){
    	document.webkitExitFullscreen()
    }
  }
})