01-初识threejs

news2025/1/13 17:29:06

基本概念

场景（Scene）：场景是 three.js 中所有 3D 对象的容器。它包含了所有的相机、灯光、几何体、材质、纹理等对象。
相机（Camera）：相机定义了场景中的视角。它控制了场景中哪些部分会被渲染出来，以及它们在屏幕上的位置和大小。
渲染器（Renderer）：渲染器将场景中的 3D 对象渲染成 2D 图像。它使用 WebGL 技术来进行渲染，并将 2D 图像呈现在 HTML5 Canvas 元素中。
几何体（Geometry）：几何体是 three.js 中的基本 3D 对象。它们定义了对象的形状和大小，包括顶点、面和线等。
材质（Material）：材质定义了对象的外观。它们控制了对象的颜色、纹理、光照等特性。
纹理（Texture）：纹理是用于覆盖在几何体表面的图片。它们可以用来创建表面的颜色、反射、透明度等效果。
光源（Light）：光源定义了场景中的光照。它们可以是点光源、聚光灯、平行光等不同类型。
动画（Animation）：动画是使对象在场景中运动的方法。它们可以使用 Tween.js 等库来创建平滑的动画效果。
控制器（Controller）：控制器是用于交互式控制场景中对象的工具，例如旋转、平移、缩放等。three.js 提供了一些内置的控制器，例如 OrbitControls、TrackballControls、FlyControls 等。
粒子系统（Particle System）：粒子系统是用于创建大量小粒子效果的工具。它们可以用于模拟火花、雨滴、雪花等效果。
天空盒（Skybox）：天空盒是一种用于创建环境纹理的技术，用于模拟场景的背景。它们可以使场景看起来更加真实。
阴影（Shadow）：阴影是在场景中创建对象的投影效果。three.js 提供了几种不同的阴影技术，包括基于光线跟踪的阴影技术和基于贴图的阴影技术。
后期处理（Post-Processing）：后期处理是一种用于对渲染图像进行额外处理的技术。它们可以用于创建特殊效果，例如景深、反射、色彩校正等。
物理引擎（Physics Engine）：物理引擎是用于模拟物理效果的工具。它们可以用于创建具有物理效果的对象，例如球体、盒子、车辆等。
加载器（Loader）：加载器是用于将 3D 模型、纹理、音频等资源加载到场景中的工具。three.js 提供了多个加载器，例如 OBJLoader、MTLLoader、TextureLoader 等。

绘制一个基础场景，并为场景添加光源及一个几何体。

1.创建渲染器

const createRenderer = () => new THREE.WebGLRenderer({ canvas: container.value, antialias: true });

2.创建相机

const createCamera = (options = {}) => {
  const { fov, aspect, near, far, positions, eyesP } = {
    fov: 100,
    aspect: 2,
    near: 0.1,
    far: 1000,
    positions: [0, 50, 0],
    eyesP: [0, 0, 0],
    ...options
  }
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(...positions);
  camera.lookAt(...eyesP)
  return camera
}

3.创建场景

const scene = new THREE.Scene();

4.创建灯光

const light = new THREE.PointLight(0xffffff, 3)
light.position.set(0, 0, 30)
scene.add(light)

5.创建几何体

const sphereGeometry = new THREE.SphereGeometry(10, 100, 100)
const material = new THREE.MeshPhongMaterial({
    color: 0x0044ff,
    emissive: 0xff00ff
})
const mesh = new THREE.Mesh(sphereGeometry, material);
scene.add(mesh)

6.加载渲染器

renderer.render(scene, camera);

完整代码

<template>
  <div>
    <canvas ref="container"
            height="700"
            width="1400"></canvas>
  </div>
</template>

<script setup>
import THREE from "@/global/three";
import { onMounted, ref } from "vue";

const container = ref(null);
// 创建渲染器
const createRenderer = () => new THREE.WebGLRenderer({ canvas: container.value, antialias: true });
// 创建相机
const createCamera = (options = {}) => {
  const { fov, aspect, near, far, positions, eyesP } = {
    fov: 100,
    aspect: 2,
    near: 0.1,
    far: 1000,
    positions: [0, 50, 0],
    eyesP: [0, 0, 0],
    ...options
  }
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(...positions);
  camera.lookAt(...eyesP)
  return camera
}

onMounted(() => {
  const renderer = createRenderer();
  const camera = createCamera();
  const scene = new THREE.Scene();
  const light = new THREE.PointLight(0xffffff, 3)
  light.position.set(0, 0, 30)
  scene.add(light)
  const sphereGeometry = new THREE.SphereGeometry(10, 100, 100)
  const material = new THREE.MeshPhongMaterial({
    color: 0x0044ff,
    emissive: 0xff00ff
  })
  const mesh = new THREE.Mesh(sphereGeometry, material);
  mesh.position.x = 0;
  scene.add(mesh)
  renderer.render(scene, camera);
});
</script>