Three.js 入门（一）：全面概览

2023-09-05 18:21:51

前言

Three.js 是一个流行的 JavaScript 库，用于在网页上创建和呈现 3D 图形。它建立在 WebGL 之上，一个高级图形 API，允许开发人员使用硬件加速的图形处理。通过 Three.js，开发人员可以创建交互式 3D 场景、可视化和游戏。

概述

跨平台兼容性： Three.js 可在所有现代 Web 浏览器中使用，包括 Chrome、Firefox 和 Safari。
基于场景的架构： Three.js 使用基于场景的架构，场景中包含构成 3D 环境的各个对象。
易于使用： Three.js 提供了一个简洁易用的 API，使开发人员可以轻松创建复杂的三维场景。
功能丰富： Three.js 具有广泛的功能，包括材质、灯光、相机、动画和粒子系统。
社区支持： Three.js 拥有一个活跃的社区，提供支持、文档和示例。

入门

学习 Three.js 的最佳方法是从头开始创建一个简单的场景。以下是如何在 HTML 页面中设置 Three.js：

<script src="three.js"></script>
<script>
  // 创建场景
  const scene = new THREE.Scene();

  // 创建摄像机
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

  // 创建渲染器
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);

  // 将渲染器添加到 DOM
  document.body.appendChild(renderer.domElement);

  // 动画循环
  function animate() {
    requestAnimationFrame(animate);

    // 渲染场景
    renderer.render(scene, camera);
  }

  animate();
</script>