Three.js 场景在线编辑器 - 拖拽添加模型和灯光

核心功能

丰富的3D几何体模型

编辑器内置了8种常用的3D几何体模型，涵盖立方体（Box）、球体（Sphere）、圆柱体（Cylinder）、圆锥体（Cone）、平面（Plane）、圆环（Torus）、环形结（TorusKnot）以及十二面体（Dodecahedron）。每种几何体都支持自定义参数调整，例如球体可以调整半径和分段数，圆柱体可以设置不同的上下半径等。用户只需在场景中拖拽即可添加模型，无需编写任何代码。

全面的灯光系统

编辑器提供5种灯光类型，每种灯光都具有独立的属性调节面板。环境光（AmbientLight）为场景提供全局均匀照明，适合作为基础光照层；点光源（PointLight）从一个点向四周发射光线，可用于模拟蜡烛、灯泡等效果；方向光（DirectionLight）沿特定方向发射平行光线，适合模拟日光照明；聚光灯（SpotLight）产生锥形光束，适用于手电筒、舞台灯光等效果；半球光（HemisphereLight）可以分别设置天空色和地面色，模拟自然环境中的漫反射光照。

属性面板与场景管理

每个场景对象都拥有独立的属性面板，支持对位置（Position）、旋转（Rotation）、缩放（Scale）、颜色（Color）、强度（Intensity）等参数进行精确编辑。场景对象列表以树形结构展示当前场景中的所有元素，用户可以快速定位和切换目标对象，也可以通过删除操作清理不需要的元素。整个场景的编辑状态实时同步到预览窗口，所见即所得。

截图与视角控制

编辑器内置截图功能，用户可以一键导出当前场景的高清渲染图片，支持保存为PNG格式。视角控制功能允许用户通过鼠标拖拽旋转视角、滚轮缩放、右键平移等操作，全方位观察场景效果。预设视角功能还可以快速切换到正面、侧面、顶部等标准视角，帮助用户从不同角度检查场景布局。

跨平台触屏支持

编辑器全面支持触屏设备的操作，包括单指拖拽旋转视角、双指缩放、点击选择对象等手势操作。无论是iPad、Android平板还是其他触屏设备，用户都能获得流畅的编辑体验，真正实现随时随地进行3D场景创作。