入门 ·Introduction· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么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渲染器— SceneCamera → canvas│ └─────────────────────────────────────────┘| 对象 | 作用 | 本案例 | |------|------|--------| |Scene| 3D 世界容器 | 空场景 一个 mesh | |PerspectiveCamera| 透视相机近大远小 | 默认参数位置 (200,200,200) | |WebGLRenderer| 创建 WebGL 上下文并绘制 | 尺寸 容器#box| |BoxGeometry| 长方体顶点数据 | 100×100×100 | |MeshBasicMaterial| 不受光照影响的基础材质 | 纯红0xff0000| |Mesh| Geometry Material | 位置 y10 |为什么用 MeshBasicMaterial本案例没有添加光源若用MeshLambertMaterial等受光材质物体会呈现黑色。Basic 材质直接显示设定颜色适合入门演示。实现步骤获取 DOM 容器#box作为 canvas 挂载点new THREE.Scene()创建场景BoxGeometryMeshBasicMaterial→Mesh设置positionscene.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循环