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 编辑整理,如需转载,请注明出处。