ThreeJs 基础入门

理解

官网

Threejs 是一个基于 webgl 的 3D 图形编程框架；简单直观的方式封装了 3D 图形编程中的常用对象。

Threejs 中创建一个程序的时候需要有这些基本对象：

• 场景（Scene）：是 3D 世界的容器，包含所有对象，例如：灯光、网格、物体流体等，还包含背景、烟雾等属性。
• 几何体（Geometry）：物体的形状，是 3D 图形的基本元素。表示 3D 物体的形状和大小，如立方体、球体、圆锥体等。
  • 材质（Material）：皮肤，构成物体的材质
  • 网格对象（Mesh）：将几何体和材质结合起来，形成可视化的物体，是 Three 中最基本的可视化对象。
• 相机（Camera）：场景的观察者，类似人的眼睛。他决定我们能看到场景中的哪些内容。场景中可以有对个相机，并且是可以切换的
• 渲染器（Renderer）：将场景绘制到画布上

第一个程序

import { useEffect } from "react";
import THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"

function App() {

  useEffect(() => {
    const canvas = document.getElementById("canvas");
    const width = window.innerWidth;
    const height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;

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

    // 创建环境光，他会均匀的照亮所有物体，因为没有方向，所以不会产生阴影
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    // 创建平行光
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
    scene.add(ambientLight, directionalLight);

    // 创建立方体
    const geometry = new THREE.BoxGeometry(1, 1, 1);

    // 为每个面添加颜色材质
    const faces = [];
    for (let i = 0; i < geometry.groups.length; i++) {
      const material = new THREE.MeshBasicMaterial({
        color: Math.random() * 0xffffff
      });
      faces.push(material);
    }
    // 创建材质
    // const material = new THREE.MeshLambertMaterial({
    //   color: 0x1890ff,
    // });
    const mesh = new THREE.Mesh(geometry, faces);
    scene.add(mesh);

    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, width / height);

    // 设置相机位置
    camera.position.set(2, 2, 3);

    // 相机朝向场景
    camera.lookAt(scene.position);

    scene.add(camera);

    const axesHelper = new THREE.AxesHelper();
    scene.add(axesHelper);

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

    // 设置像素比
    renderer.setPixelRatio(window.devicePixelRatio || 1);

    // 设置渲染大小
    renderer.setSize(width, height);
    // 渲染场景
    renderer.render(scene, camera);

    // 场景可拖动
    const orbitControls = new OrbitControls(camera, canvas);

    const clock = new THREE.Clock();

    // 开启惯性运动属性
    orbitControls.enableDamping = true;

    const tick = () => {
      // console.log(clock.getElapsedTime());
      1
      orbitControls.update();
      renderer.render(scene, camera);
      requestAnimationFrame(tick);
    };
    tick();
  }, [])

  return <canvas id="canvas"></canvas>
}

export default App;

预览

相机

相机规定着我们以什么样的方式，观察场景

透视（远景）相机