题目
请使用 Three.js + HTML + CSS 开发一个可直接运行的 3D 交互网页,主题是一架现代波音民航客机停放在机场停机坪上。
要求:
1. 输出一个完整的单文件 HTML,包含 HTML、CSS 和 JavaScript。
2. 使用 Three.js 构建整个 3D 场景,全部使用程序化几何体生成,不允许加载外部 3D 模型、图片贴图或 glTF 文件。
3. 主体是一架具有现代波音客机风格的大型双发喷气式民航飞机,外观参考 Boeing 787 / 777 这类宽体客机的特征,但不要依赖外部模型。
4. 飞机需要具备清晰可识别的结构,包括:
- 长机身
- 驾驶舱玻璃
- 后掠机翼
- 双侧发动机吊舱
- 垂直尾翼和水平尾翼
- 起落架
- 舷窗排列
5. 场景环境为机场停机坪,包含:
- 地面跑道或停机坪标线
- 机场灯光
- 简化航站楼或远处建筑体块
- 地面引导线
- 若干机场服务车辆或设备(用简化几何体表现即可)
6. 飞机材质以白色机身、深色驾驶舱玻璃、金属质感发动机和机翼为主,整体风格简洁真实,不要卡通。
7. 添加动态效果:
- 飞机轻微机身反光
- 引擎风扇缓慢旋转
- 跑道灯或停机坪灯光微微闪烁
- 云层缓慢移动
- 相机轻微漂浮感
8. 使用环境光、方向光和辅助点光源,开启阴影,增强真实感和空间层次。
9. 支持 OrbitControls,可鼠标拖拽旋转、滚轮缩放。
10. 页面全屏自适应,窗口尺寸变化时自动更新渲染器和相机比例。
11. 代码结构清晰,函数模块化,例如:
- createScene
- createAirplane
- createAirportGround
- createLights
- createEnvironment
- animate
12. 使用复用几何体和合理面数,避免性能过重。
13. 整体风格为 realistic cinematic browser 3D demo,强调飞机结构感、工业设计感和机场氛围。
14. 最终只输出完整 HTML 代码,不要解释。