设置渲染器的尺寸后, 生成的canvas元素的大小是innerHight和innerWidth的3倍, 会出现滚动条

来源：9-2 渲染三维对象

慕标4065342

2023-05-05

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="../lib/three.js"></script>
  </head>
  <body></body>
</html>

<script>
  // 创建一个场景
  const scene = new THREE.Scene()
  // 创建一个相机
  /**
   * 第一个参数: 视角
   * 第二个参数: 宽高比
   * 第三个参数: 最近距离
   * 第四个参数: 最远距离
   */
  const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    1,
    1000
  )
  // 设置相机位置--坐标系是如何计算的
  camera.position.set(0, 0, 20)

  // 创建一个渲染器
  const renderer = new THREE.WebGLRenderer()
  // 设置渲染器尺寸
  renderer.setSize(window.innerWidth, window.innerHeight)

  // 渲染容器
  console.dir(renderer.domElement)
  document.body.appendChild(renderer.domElement)
</script>

图片描述