开篇three场景

从一个渲染一个立方体开始 = hello world😎

TIP

示例基于vue3。先不考虑模块化、封装的问题。写出来再说。😘

三维的物体要渲染在二维的屏幕上。首先要创建一个场景来放置物体，那么最终怎么显示三维的内容，就应该找一个相机，将相机放在场景的某个位置，然后想要显示就要把相机拍的内容渲染出来。所以就引出三个基本概念：场景、相机、渲染器。

模板

<template>
  <div id="canvas-container" ref="container"></div>
</template>

逻辑

<script setup>
import { ref, onMounted } from "vue";
import {
  Scene,
  Color,
  PerspectiveCamera,
  WebGLRenderer,
  Mesh,
  BoxBufferGeometry,
  MeshBasicMaterial,
} from "three";

import { OrbitControls } from "three/addons/controls/OrbitControls.js";

const container = ref();

onMounted(() => {
  // 1、创建场景
  const scene = new Scene();
  // 设置场景的属性
  scene.background = new Color("skyblue");

  // 2、创建相机
  const fov = 35; // fov = 视野
  const aspect = container.value.clientWidth / container.value.clientHeight; // 纵横比（虚拟值）
  const near = 0.1; // 近剪裁平面
  const far = 100; // 远剪裁平面

  const camera = new PerspectiveCamera(fov, aspect, near, far);
  // 将摄像机向后移动，以便我们可以查看场景
  camera.position.set(0, 0, 10);

  // 3、创建一个几何体
  const geometry = new BoxBufferGeometry(2, 2, 2);

  // 创建一个默认白色材质
  const material = new MeshBasicMaterial();

  // 根据几何体和材质创建物体
  const cube = new Mesh(geometry, material);

  // 添加几何体到场景中
  scene.add(cube);

  // 4、初始化渲染器
  const renderer = new WebGLRenderer();

  // 接下来，将渲染器设置为与我们的容器元素相同的大小
  renderer.setSize(container.value.clientWidth, container.value.clientHeight);

  // 最后，设置像素比例，以便我们的场景在HiDPI显示器上看起来不错
  renderer.setPixelRatio(window.devicePixelRatio);

  // 将自动创建的元素添加到<canvas>页面
  container.value.append(renderer.domElement);

  //  // 渲染或“创建静止图像”场景
  //  renderer.render(scene, camera);  

 // 5、添加控制器，鼠标可以交互旋转，看起来是一个真正的立方体。
  const controls = new OrbitControls(camera, renderer.domElement);
  function render() {
    //如果后期需要控制器带有阻尼效果，或者自动旋转等效果，就需要加入controls.update()
    controls.update()
    renderer.render(scene, camera);
     // 渲染下一帧的时候就会调用render函数
    requestAnimationFrame(render);
  }
  render();
});
</script>

样式

#canvas-container {
  width: 500px;
  height: 500px;
}