5分钟上手SceneJS：零基础创建你的第一个WebGL 3D场景-平芜编程栈

5分钟上手SceneJS：零基础创建你的第一个WebGL 3D场景

【免费下载链接】scenejsAn extensible WebGL-based 3D engine. This is an archived project.项目地址: https://gitcode.com/gh_mirrors/sce/scenejs

想让浏览器里直接出现立体的3D画面，却不知道从哪开始？SceneJS就是为你准备的WebGL 3D引擎——一个基于 WebGL 的可扩展开源引擎，用简单的 JavaScript 配置即可创建WebGL 3D场景。它的核心思想是"场景图"（Scene Graph）：像搭积木一样，把几何体、材质、灯光、相机层层嵌套成一颗节点树，引擎自动完成渲染。本教程带你 5 分钟从零跑通第一个SceneJS 3D示例，无需图形学基础，复制粘贴即可看到效果。

什么是 SceneJS？为什么适合新手入门？

SceneJS 是一款老牌的开源WebGL 3D引擎，特点是可扩展：引擎内置了场景、节点、渲染三大核心模块，其余能力全部通过插件提供。想用茶壶、立方体、地形？加载对应插件即可，不用自己写一行着色器代码。

新手友好的三个理由：

📦零配置渲染管线：不用接触 GLSL 和矩阵运算，引擎内部帮你处理；
🧩插件化设计：几何体、相机、天空盒、后处理都以插件形式存在；
📄官方示例丰富：项目自带 200+ 示例页面，照着改参数就能玩出花样。

快速获取与引入 SceneJS：最简单的配置方法

获取引擎源码并运行示例，最直接的方式是克隆官方仓库：

git clone https://gitcode.com/gh_mirrors/sce/scenejs

在浏览器中打开examples/index.html即可浏览全部示例。如果你想在自己的 HTML 页面中使用，只需引入两个文件：

引擎核心：scenejs.js（或压缩版api/latest/scenejs.min.js）
插件目录：所有节点类型由 plugins 目录下的插件提供

引入后第一件事是告诉引擎插件放在哪，这个设置直接影响几何体、相机等节点能否正常加载：

<script src="api/latest/scenejs.min.js"></script> <script> // 指向项目自带的插件目录 SceneJS.setConfigs({ pluginPath: "api/latest/plugins" }); </script>

创建第一个WebGL 3D场景：5个核心步骤

SceneJS 把"建场景"变成了"写配置"。参考官方首个示例 scenegraph_firstExample.html，我们分 5 步搭建一个旋转的 3D 茶壶。

步骤1：准备画布（Canvas）

在 HTML 里放一个<canvas>元素，SceneJS 会直接渲染到它上面：

<canvas id="myCanvas" width="500" height="500"></canvas>

步骤2：创建场景并挂接相机

调用SceneJS.createScene创建场景，指定画布 ID，再用lookAt节点设置相机位置和观察目标：

var scene = SceneJS.createScene({ canvasId: "myCanvas", nodes: [ { type: "lookAt", eye: { y: 5, z: 7 }, // 相机位置 look: { x: 0, y: 1, z: 0 } // 看向的点 } ] });

步骤3：添加材质与几何体

在相机节点下嵌套material设置颜色，再用geometry/teapot节点加载茶壶模型：

nodes: [ { type: "lookAt", eye: { y: 5, z: 7 }, nodes: [ { type: "material", color: { r: 0.3, g: 0.3, b: 1.0 }, nodes: [ { type: "geometry/teapot" } ] } ] } ]

看到没有？material嵌套geometry/teapot，父子关系即渲染层级，这正是SceneJS 场景图的核心用法。

步骤4：加一个旋转动画

想要画面动起来，用rotate节点包住几何体，并通过scene.on("tick", ...)每帧更新角度——这是 SceneJS 驱动动画的标准模式：

nodes: [ { type: "rotate", id: "myRotate", y: 1.0, angle: 0, nodes: [{ type: "geometry/teapot" }] } ] scene.getNode("myRotate", function (myRotate) { var angle = 0; scene.on("tick", function () { myRotate.setAngle(angle += 0.5); // 每帧旋转 0.5 度 }); });

步骤5：打开页面查看效果

刷新浏览器，一个旋转的蓝色茶壶就出现在画面里了！完整代码可对照 scenegraph_firstExample.html，它只需约 60 行即可完成全部功能。

扩展玩法：轨道相机、纹理与天空盒

首个示例跑通后，你可以基于项目里的更多示例快速扩展：

想要的效果	用到的节点	参考示例
鼠标拖拽旋转视角	`cameras/orbit`、`cameras/trackball`	cameras_orbit.html
给立方体贴上图片	`texture`节点	scenegraph_secondExample.html
天空盒背景	`skybox/clouds`	skyboxes_clouds.html
更真实的立方体	`geometry/box`	geometry_box.html

小技巧：所有节点类型都来自 plugins/node 目录下的插件，查看某个插件源码，就能知道它支持哪些配置参数。例如 teapot.js 定义了茶壶几何体，orbit.js 实现了轨道相机。

深入理解：SceneJS 的场景图架构

为什么 SceneJS 用起来如此顺手？秘密就在它的场景图（Scene Graph）架构里。场景是一棵树，lookAt、material、rotate都是树上的节点，父节点属性自动传递给子节点。引擎的核心实现位于 src/core/scene/ 和 src/core/display/，其中 node.js 定义了所有节点的基类。

从上图可以看出，SceneJS 在渲染时会用**视锥体剔除（Frustum Culling）**自动裁掉视野外的物体，并通过 Worker 线程并行处理（见 frustum 插件），这也是它能处理高细节 3D 场景的原因之一。