企业官网建设流程全解析

入门 ·Introduction· ▶ 在线运行案例

• 案例合集：三维可视化功能案例（threehub.cn）
• 开源仓库github地址：https://github.com/z2586300277/three-cesium-examples
• 400个案例代码:网盘链接

你将学到什么

• Three.js 最小可运行程序的三件套：Scene、Camera、Renderer
• 可见物体Mesh = Geometry + Material的组合方式
• 一次性渲染与后续「动画循环」的区别

效果说明

页面中央出现一个红色立方体。这是 Three.js 里最经典的 Hello World：没有光照、没有动画，调用一次renderer.render()把场景画到 canvas 上。

核心概念

Three.js 是对WebGL的高层封装。WebGL 底层只做一件事：在 GPU 上绘制三角形。Three.js 帮你管理场景图、相机矩阵和渲染管线。

┌─────────────────────────────────────────┐
│ Scene（场景）— 所有 3D 对象的容器 │ │ └── Mesh（网格） │ │ ├── Geometry — 顶点，定义形状 │ │ └── Material — 外观，定义颜色 │ ├─────────────────────────────────────────┤ │ Camera（相机）— 观察角度与视野 │ ├─────────────────────────────────────────┤ │ Renderer（渲染器）— Scene+Camera → canvas│ └─────────────────────────────────────────┘

| 对象 | 作用 | 本案例 | |------|------|--------| |Scene| 3D 世界容器 | 空场景 + 一个 mesh | |PerspectiveCamera| 透视相机，近大远小 | 默认参数，位置 (200,200,200) | |WebGLRenderer| 创建 WebGL 上下文并绘制 | 尺寸 = 容器#box| |BoxGeometry| 长方体顶点数据 | 100×100×100 | |MeshBasicMaterial| 不受光照影响的基础材质 | 纯红0xff0000| |Mesh| Geometry + Material | 位置 y=10 |

为什么用 MeshBasicMaterial？本案例没有添加光源，若用MeshLambertMaterial等受光材质，物体会呈现黑色。Basic 材质直接显示设定颜色，适合入门演示。

实现步骤

• 获取 DOM 容器#box，作为 canvas 挂载点
• new THREE.Scene()创建场景
• BoxGeometry+MeshBasicMaterial→Mesh，设置position，scene.add(mesh)
• PerspectiveCamera设置position和lookAt对准物体
• WebGLRenderer.setSize()→render(scene, camera)→appendChild(domElement)

• 代码要点

  import * as THREE from 'three';
  // 场景 + 相机-- > 渲染器 - >成果
  // 场景 = （网格模型(几何体 + 材质) + 位置） + （网格模型(几何体 + 材质) + 位置） // 相机 = 相机位置 + 相机观察位置
  const box = document.getElementById('box')
  const scene = new THREE.Scene();// 创建场景 const geometry = new THREE.BoxGeometry(100, 100, 100); //几何体 const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); //材质 const mesh = new THREE.Mesh(geometry, material); //网格模型 mesh.position.set(0, 10, 0); //网格模型位置 scene.add(mesh); //场景添加网格模型
  const camera = new THREE.PerspectiveCamera(); //相机 camera.position.set(200, 200, 200); //相机位置 camera.lookAt(0, 10, 0); //相机观察位置
  const renderer = new THREE.WebGLRenderer(); // 创建渲染器 renderer.setSize(box.clientWidth, box.clientHeight) renderer.render(scene, camera); //执行渲染 box.appendChild(renderer.domElement);

  完整源码：GitHub

  小结

  • 最小 Three.js 程序 =Scene + Camera + Renderer + 至少一个 Mesh
  • 本案例只渲染一帧；要动起来需要 动画 中的requestAnimationFrame循环