【ThreeJs-1】初始化场景并引入一个物体

安装ThreeJs库

npm i three

创建场景容器

<template>
  <div id="three-scene"></div>
</template>

引入ThreeJs库创建场景

import * as THREE from 'three';

获取场景容器

const canvas = document.getElementById("three-scene");

创建场景

const scene = new THREE.Scene();

创建相机

const camera = new THREE.PerspectiveCamera(
    75, 
    canvas.clientWidth / canvas.clientHeight, 
    0.1, 
    1000
);

• 75: 这个值表示相机的垂直视场角（Field of View, FOV），单位是度数。在这个例子中，FOV 设置为 75 度。

• canvas.clientWidth / canvas.clientHeight: 这个值表示相机的宽高比（Aspect Ratio）。通常使用渲染区域或画布的宽度与高度之比来计算。这里直接使用了 容器元素的宽度和高度。

• 0.1: 这个值表示相机的近截面距离（Near Clipping Plane）。任何离相机更近于此距离的对象都不会被渲染。这里的近截面距离设置为 0.1 单位。

• 1000: 这个值表示相机的远截面距离（Far Clipping Plane）。任何离相机更远于此距离的对象都不会被渲染。这里的远截面距离设置为 1000 单位。

 创建渲染器

  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(canvas.clientWidth, canvas.clientHeight);
  canvas.appendChild(renderer.domElement);

• ​​​​创建 WebGLRenderer 实例:  使用 THREE.WebGLRenderer 创建一个新的 WebGL 渲染器实例，并通过 { antialias: true } 配置选项来启用抗锯齿功能。
• 设置渲染器大小:  调用 renderer.setSize() 方法来设置渲染器输出的尺寸，使其与 canvas 的尺寸相匹配。这里使用了 canvas.clientWidth 和 canvas.clientHeight 来获取场景容器的宽度和高度。
• 将渲染器 DOM 元素添加到 canvas 中:  1.每个 WebGLRenderer 实例都有一个关联的 DOM 元素，可以通过 renderer.domElement 访问。2.将这个 DOM 元素添加到指定的场景容器元素中，这样渲染的结果就会显示在场景容器上。

创建立方体 

  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

• 创建几何体：使用 THREE.BoxGeometry() 创建一个立方体几何体对象。默认情况下，它创建的是一个边长为 1 的立方体。
• 创建材质：使用 THREE.MeshBasicMaterial 创建一个基本网格材质对象，并设置颜色为绿色 (0x00ff00)。这种材质不支持光照效果，只根据给定的颜色进行渲染。
• 创建网格模型：使用 THREE.Mesh 创建一个网格模型对象，传入之前定义的几何体和材质作为参数。这将结合几何体和材质来创建一个可渲染的三维对象。
• 将网格模型添加到场景：使用 scene.add() 方法将创建的立方体网格模型添加到场景中。这样，在渲染场景时，该立方体会被绘制出来。

创建渲染动画函数 

  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }
  animate();

• 启动动画循环:  使用 requestAnimationFrame(animate) 来请求浏览器在下次重绘之前调用 animate 函数。这使得 animate 函数能够持续运行，形成动画效果。
• 渲染场景:  使用 renderer.render(scene, camera) 来渲染场景。这会根据当前的场景状态和相机位置来更新渲染结果。

这段代码定义了一个动画循环，它不断地请求浏览器更新画面，并渲染场景。如果存在交互控制器，还会更新其状态。这确保了场景能够持续地更新和展示动画效果。 

完整代码 

<template>
  <div id="three-scene"></div>
</template>

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

onMounted(() => {
  const canvas = document.getElementById("three-scene");
  // 创建场景
  const scene = new THREE.Scene();

  // 创建相机
  const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
  camera.position.z = 5;

  // 创建渲染器
  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(canvas.clientWidth, canvas.clientHeight);
  canvas.appendChild(renderer.domElement);

  // 添加物体
  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  // 开始渲染
  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  };
  animate();
})
</script>

<style scoped>
#three-scene {
  width: 1920px;
  height: 1080px;
}
</style>