城市线条

Three.js 城市线条效果 | 三维可视化 / AI 提示词
📋 AI 提示词
prompt
1
创建一个城市线条效果,加载FBX城市模型,使用EdgesGeometry提取建筑边缘线,创造赛博朋克风格的城市线框效果。
🖼️ 效果预览
🎮 案例演示
📖 效果拆解
| 层次 | 视觉效果 | 技术实现 |
|---|---|---|
| 基础 | FBX城市模型 | FBXLoader 加载 |
| 边缘线 | EdgesGeometry | 提取建筑边缘 |
| 材质 | 分离处理 | 建筑和地面不同材质 |
| 辅助 | 坐标轴辅助 | 了解空间位置 |
| 风格 | 赛博朋克 | 紫色建筑和深色地面 |
🔧 核心技术点
City类定义
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
class City {
constructor() {
this.fbxLoader = new FBXLoader();
this.group = new THREE.Group();
this.clock = new THREE.Clock()
this.surroundLineMaterial = null;
this.time = { value: 0 };
this.startTime = { value: 0 };
this.startLength = { value: 2 }
this.isStart = false;
this.fbxLoader.load(FILE_HOST + 'models/fbx/shanghai.FBX', (group) => {
this.group.add(group);
group.traverse((child) => {
// 设置城市建筑材质
if (child.name == 'CITY_UNTRIANGULATED') {
const materials = Array.isArray(child.material) ? child.material : [child.material]
materials.forEach((material) => {
material.transparent = true;
material.color.setStyle("#9370DB");
})
}
// 设置城市地面材质
if (child.name == 'LANDMASS') {
const materials = Array.isArray(child.material) ? child.material : [child.material]
materials.forEach((material) => {
material.transparent = true;
material.color.setStyle("#040912");
})
}
})
this.init();
});
}
}
边缘线效果
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
surroundLine() {
let cityBuildings
this.group.traverse(child => {
if (child.name !== 'CITY_UNTRIANGULATED') return
cityBuildings = child
})
const geometry = new THREE.EdgesGeometry(cityBuildings.geometry);
const surroundLineMaterial = new THREE.ShaderMaterial({
transparent: true,
uniforms: {
uColor: {
value: new THREE.Color('#FFF')
}
},
vertexShader: `
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
uniform vec3 uColor;
void main() {
gl_FragColor = vec4(uColor, 1);
}
`
});
const line = new THREE.LineSegments(geometry, surroundLineMaterial);
line.name = 'surroundLine';
line.applyMatrix4(cityBuildings.matrix.clone())
cityBuildings.parent.add(line)
}
💡 调试与优化
| 问题类型 | 表现形式 | 解决方案 |
|---|---|---|
| 模型加载失败 | 城市不显示 | 检查 FBX 模型路径 |
| 边缘线缺失 | 名称不匹配 | 根据实际模型调整名称 |
| 视角不佳 | 看不清建筑 | 调整 camera.position |
| 性能问题 | 帧率低 | 简化模型或减少面数 |
🚀 扩展思路
| 变体效果 | 核心改动 | 难度 |
|---|---|---|
| 动态边缘线 | 添加边缘线动画效果 | ⭐⭐ |
| 高度染色 | 根据建筑高度设置不同颜色 | ⭐⭐ |
| 光效叠加 | 添加发光效果增强视觉 | ⭐⭐ |
| 夜间灯光 | 添加建筑窗户灯光效果 | ⭐⭐ |
| 路径动画 | 添加相机沿路径飞行动画 | ⭐⭐⭐ |
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。








京公网安备 11010502038735号
💬 评论区
评论功能即将上线,敬请期待!