1

WebGL 定义底层的标准，Chrome、Firefox 实现了这些标准。

一个典型的 Three.js 程序至少要包括渲染器（Renderer）、场景（Scene）、照相机（Camera），以及你在场景中创建的物体

目标

• 照相机

• 几何形状

• 材质

• 物体

• 动画

• 模型导入

• 加入光照

• 着色器

渲染器（Renderer）

渲染器将和 Canvas 元素进行绑定

const renderer = new THREE.WebGLRenderer({
  canvas: document.getElementById("mainCanvas"),
});

场景（Scene）

一个大容器

物体都添加到场景中

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

坐标系

WebGL 和 Three.js 的坐标系都是右手坐标系

照相机（Camera）

//   创建相机
const camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
camera.position.set(0, 0, 5);

scene.add(camera);

camera 也是需要添加到 scene 中

demo 01

对应例子 例 1.2.1

完整代码

<template>
  <canvas ref="three01" width="400px" height="300px"></canvas>
</template>

<script setup lang="ts">
import * as THREE from "three";
import { useTemplateRef, onMounted } from "vue";

const dom = useTemplateRef("three01");

onMounted(() => {
  // 创建渲染器
  const renderer = new THREE.WebGLRenderer({
    canvas: dom.value,
  });

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

  //   创建相机
  const camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
  camera.position.set(0, 0, 5);
  //  将 _相机_ 添加到 _场景_ 中
  scene.add(camera);

  //   创建 x、y、z方向长度分别为1、2、3的长方体
  const cube = new THREE.Mesh(
    new THREE.BoxGeometry(1, 2, 3),
    new THREE.MeshBasicMaterial({
      color: 0xff0000,
    })
  );
  scene.add(cube);

  // 渲染
  renderer.render(scene, camera);
});
</script>