基于 ThreeJS 的 DTE 库使用 - 场景容器和物料

本文是我在某中厂任职时的学习笔记，用到 DTE 库是基于 ThreeJS 实现的闭源的公司内部库，替代方案和说明可见 DTE 库的开源替代方案（ThreeJS 等）

场景搭建

三维引擎的“铁三角”

在DTE或者说任何三维引擎里，这三样东西是绝对的“铁三角”，缺一不可。

场景 (Scene)：就是我们的数字片场。它是一个虚拟的无限大空间，我们之后要添加的所有东西，比如模型、灯光、辅助工具等，都放在这个场景里。
相机 (Camera)：就是我们的虚拟眼睛。它有位置（我在哪里看）、有方向（我在看哪里）、有视野（我能看多广，是广角还是长焦）。我们最终在屏幕上看到的，就是相机“看到”的画面。
渲染器 (Renderer)：这是最勤劳的“幕后工作者”。它会根据场景里有什么东西、相机在什么位置，不知疲倦地进行大量计算，然后把最终的二维图像绘制到网页的 <canvas> 标签上。这个过程我们称之为“渲染”（Render）。

在 DTE 中搭建场景

CommonContainer 把这些都打包好了，可以直接使用，要做的只是挂载到某个 DOM 容器上。

// 1. 首先，我们要拿到HTML中那个div元素
const containerDiv = document.getElementById('my-3d-container');

// 2. 像文档里说的那样，创建一个CommonContainer实例
// 我们告诉它，请把三维世界渲染到 'containerDiv' 这个DOM元素里
const container3D = new CommonContainer({ 
	domId: containerDiv, 
});

// 3. 验证一下，看看我们是不是真的拿到了“铁三角”
const { scene, camera, renderer } = container3D;
console.log("场景 (Scene) 对象:", scene);
console.log("相机 (Camera) 对象:", camera);
console.log("渲染器 (Renderer) 对象:", renderer);

// 如果你在浏览器控制台看到了这三个对象被打印出来，并且没有报错
// 恭喜你！你已经成功创建了一个三维空间！

小结

我们理解了三维世界的核心三要素：场景、相机、渲染器。
我们学会了使用DTE的 CommonContainer 来快速完成基础环境的搭建。

物料

简单立方体

一个可见的物体 (Mesh) = 形状 (Geometry) + 外观 (Material)

在DTE中，这个逻辑是完全一样的：

几何体（Geometry）：定义了一个物体的形状。它本质上是一大堆顶点（三维空间中的点）以及这些点如何连接成面的信息。DTE（以及其核心Three.js）为我们提供了很多现成的几何体，比如盒子、球体、圆柱体等。
材质（Material）：定义了一个物体的外观。它决定了物体是什么颜色、是否反光、是否透明、是否受灯光影响等等。

动手实践：创造一个绿色立方体

现在，我们来严格按照文档和上面的公式，一步步地创造一个立方体。

// --- 上一课的代码 ---
const containerDiv = document.getElementById('my-3d-container');
const container3D = new CommonContainer({ domId: containerDiv });
const { scene, camera, renderer } = container3D;

// --- 本课的新代码开始 ---

// 步骤 1: 准备“骨架” - 几何体 (Geometry)
// 我们要一个盒子形状，所以使用 BoxGeometry。
// 参数 (10, 10, 10) 分别代表盒子的 宽、高、深。
const geometry = new core.BoxGeometry(10, 10, 10);
console.log("创建了一个盒子几何体:", geometry);

// 步骤 2: 准备“皮肤” - 材质 (Material)
// 我们希望它是一个不受灯光影响的、纯粹的绿色。
// MeshBasicMaterial 就是最基础的材质，它无视灯光，自己发光。
// 0x00ff00 是绿色的十六进制表示，和CSS里的 #00ff00 是一回事。
const material = new core.MeshBasicMaterial({ color: 0x00ff00 });
console.log("创建了一个基础材质:", material);

// 步骤 3: 组合！用材质包裹几何体，生成最终的网格 (Mesh)
const cube = new core.Mesh(geometry, material);
console.log("成功创建了一个立方体网格 (Mesh)!", cube);

// 步骤 4: 将我们的“演员”请上舞台
// 非常关键的一步！创建好的物体必须手动添加到场景中，否则它不会被渲染。
scene.add(cube);

console.log("已将立方体添加到场景中。");

如果看到的是正方形，可能是视角不对，可以微调：

1 2	// 把相机沿着Z轴向后移动 25 个单位 camera.position.z = 25;

小结

我们掌握了在3D世界中创造物体的核心公式：Mesh = Geometry + Material。
我们学会了使用DTE提供的 core.BoxGeometry 和 core.MeshBasicMaterial 来创建一个简单的物体。
我们理解了 scene.add() 的重要性，它是将物体呈现在世界里的关键一步。

点、线、面

我们上一课创建的立方体，被称为面物料（或者说网格物料），因为它是由多个“面”（Polygon）组成的。但在三维世界中，还有更基础的两种“物料”：

点物料（Points）：就是一堆三维空间中的点。
线物料（Line）：连接这些点的线段。

上一课创建的 BoxGeometry，它本质上定义了立方体的8个顶点位置，以及如何连接这些顶点形成6个面。

如果我们想把这8个顶点只以点的形式画出来，就可以用 PointsMaterial。
如果我们想把这8个顶点形成的立方体边框画出来，就可以用 LineBasicMaterial。
如果我们想把这个立方体作为一个实体画出来，就用 MeshBasicMaterial。

同一个 geometry，搭配不同的 material，就能产生完全不同的视觉效果！

动手实践：用一个几何体玩出三种花样

这次我们不在场景里放一个，而是放三个物体，都使用同一个 BoxGeometry。

// --- 之前的代码 ---
const containerDiv = document.getElementById('my-3d-container');
const container3D = new CommonContainer({ domId: containerDiv });
const { scene, camera, renderer } = container3D;
camera.position.z = 30; // 把相机拉远一点，方便观察

// --- 本课新代码 ---

// 1. 准备一个通用的几何体“骨架”
const geometry = new core.BoxGeometry(10, 10, 10);

// --- 物体A: 原始的绿色实体立方体 (面) ---
const meshMaterial = new core.MeshBasicMaterial({ color: 0x00ff00 });
const cubeMesh = new core.Mesh(geometry, meshMaterial);
cubeMesh.position.x = -15; // 把A往左边挪一点，免得重叠
scene.add(cubeMesh);
console.log("添加了实体立方体 (Mesh)");


// --- 物体B: 由顶点组成的黄色点云 (点) ---
// 注意，我们使用了 PointsMaterial
const pointsMaterial = new core.PointsMaterial({
    color: 0xffff00, // 黄色
    size: 1.0         // 每个点的大小
});
// 最终物料类型是 Points
const cubePoints = new core.Points(geometry, pointsMaterial);
// cubePoints的位置在中心 (0, 0, 0)，不用动
scene.add(cubePoints);
console.log("添加了立方体顶点 (Points)");


// --- 物体C: 由边框组成的红色线框 (线) ---
// 注意，我们使用了 LineBasicMaterial
const lineMaterial = new core.LineBasicMaterial({
    color: 0xff0000 // 红色
});
// 最终物料类型是 Line
const cubeLine = new core.Line(geometry, lineMaterial);
cubeLine.position.x = 15; // 把C往右边挪一点
scene.add(cubeLine);
console.log("添加了立方体线框 (Line)");

理解了点、线、面的区别和联系，就能更灵活地去展示你的数据和模型。

小结

我们理解了三维世界的三种基本物料类型：面（Mesh）、点（Points） 和 线（Line）
我们掌握了它们的创建范式：物料类型 = Geometry + 对应的Material类型。
我们通过实践证明了几何体（Geometry）的可复用性，用同一个 BoxGeometry 渲染出了三种完全不同的效果。
我们学会了使用 object.position.x/y/z 来移动物体，避免它们在场景中重叠。

Leaves' blog