const scene = new THREE.Scene();

THREE.Scene()用于创建一个新的场景。场景是物体和光源的容器。

THREE.PerspectiveCamera(fov, aspect, near, far)

const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

THREE.PerspectiveCamera(fov, aspect, near, far)用于创建一个新的透视相机。这个函数需要四个参数：视野角度（fov）、宽高比（aspect）、近裁剪面（near）和远裁剪面（far）。

camera.position.set(x, y, z)

camera.position.set(0, 0, 5);

camera.position.set(x, y, z)用于设置相机的位置。

THREE.BoxGeometry(width, height, depth)

const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);

THREE.BoxGeometry(width, height, depth)用于创建一个新的立方体几何体。这个函数需要三个参数：宽度（width）、高度（height）和深度（depth）。

THREE.MeshBasicMaterial(options)

const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });

THREE.MeshBasicMaterial(options)用于创建一个新的基本材质。这个函数需要一个参数：一个包含材质选项的对象。

THREE.Mesh(geometry, material)

const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

THREE.Mesh(geometry, material)用于创建一个新的网格（Mesh）。这个函数需要两个参数：一个几何体和一个材质。

THREE.WebGLRenderer()

const renderer = new THREE.WebGLRenderer();

THREE.WebGLRenderer()用于创建一个新的WebGL渲染器。

renderer.setSize(width, height)

renderer.setSize(window.innerWidth, window.innerHeight);

renderer.setSize(width, height)用于设置渲染器的大小。

requestAnimationFrame(callback)

requestAnimationFrame(animate);

requestAnimationFrame(callback)用于在下一个重新绘制之前调用一个函数。这个函数需要一个参数：一个回调函数。

renderer.render(scene, camera)

renderer.render(scene, camera);

renderer.render(scene, camera)用于使用指定的相机渲染场景。

完整代码

<script setup>
  import * as THREE from "three";

  // 目标：了解three.js最基本的内容

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

  // 2、创建相机
  const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );

  // 设置相机位置
  camera.position.set(0, 0, 5);
  scene.add(camera);

  // 添加物体
  // 创建几何体
  const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
  const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
  // 根据几何体和材质创建物体
  const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  // 将几何体添加到场景中
  scene.add(cube);

  // 初始化渲染器
  const renderer = new THREE.WebGLRenderer();
  // 设置渲染的尺寸大小
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 将webgl渲染的canvas内容添加到body
  document.body.appendChild(renderer.domElement);

  // 渲染函数
  function animate() {
    // 通过requestAnimationFrame方法来调用animate函数
    requestAnimationFrame(animate);
    // 物体旋转
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    // 使用渲染器，通过相机将场景渲染进来
    renderer.render(scene, camera);
  }
  // 调用渲染函数
  animate();

</script>

<template>
  <div></div>
</template>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }
  canvas {
    width: 100vw;
    height: 100vh;
    display: block;
    left: 0;
    top: 0;
    position: fixed;
  }
</style>