热力图-glb模型

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>着色器-模型色温</title>
    
    <script src="https://unpkg.com/three@0.128.0/build/three.min.js"></script>
    
    <script src="https://unpkg.com/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
    
    <script src="https://unpkg.com/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
    <style>
        body {
            margin: 0;
            background: linear-gradient(135deg, #000428 0%, #004e92 100%);
            color: #e6e6e6;
            min-height: 100vh;
            overflow: hidden;
        }

#three-container {
            /* Three.js画布容器 */
            display: block;
            width: 100%;
            height: 100vh;
        }

.legend {
            position: fixed;
            top: 20px;
            right: 20px;
            color: #fff;
            font-family: Arial, sans-serif;
            background: rgba(0, 0, 0, 0.5);
            padding: 15px;
            border-radius: 8px;
        }

.legend-item {
            display: flex;
            align-items: center;
            margin: 5px 0;
        }

.color-block {
            width: 20px;
            height: 10px;
            margin-right: 8px;
            border-radius: 2px;
        }

.loading {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 24px;
        }
    </style>
</head>

// 初始化Three.js场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x0a0a1a);

// 初始化相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(1, 0.5, 0);
        scene.add(camera);

// 初始化渲染器 - 使用canvas元素
        const renderer = new THREE.WebGLRenderer({
            canvas: canvas,
            antialias: true,
        });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

// 添加光源
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
        scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(5, 5, 5);
        scene.add(directionalLight);

// 创建一个自定义着色器材质
        function createHeatMapMaterial(minY, maxY) {
            // 顶点着色器 - 传递世界坐标Y值
            const vertexShader = `
                varying float vHeight; // 传递给片段着色器的高度值
                uniform float uMinY;
                uniform float uMaxY;
                
                void main() {
                    // 将顶点位置转换为世界坐标
                    vec4 worldPosition = modelMatrix * vec4(position, 1.0);
                    // 传递世界坐标Y值
                    vHeight = worldPosition.y;
                    
                    // 标准顶点变换
                    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
                }
            `;

// 片段着色器
            const fragmentShader = `
                precision mediump float;
                varying float vHeight; // 从顶点着色器接收的高度值
                uniform float uMinY;
                uniform float uMaxY;

// 色温映射函数：高度值→RGB颜色
                vec3 getTemperatureColor(float height) {
                    // 归一化高度到0~1范围
                    float normalized = (height - uMinY) / (uMaxY - uMinY);
                    
                    // 限制在0~1之间
                    normalized = clamp(normalized, 0.0, 1.0);
                    
                    // 色温渐变：蓝(0) → 青 → 黄 → 红(1)
                    vec3 color;
                    if (normalized < 0.25) {
                        // 蓝 → 青
                        color = mix(vec3(0.0, 0.0, 1.0), vec3(0.0, 1.0, 1.0), normalized * 4.0);
                    } else if (normalized < 0.5) {
                        // 青 → 黄
                        color = mix(vec3(0.0, 1.0, 1.0), vec3(1.0, 1.0, 0.0), (normalized - 0.25) * 4.0);
                    } else if (normalized < 0.75) {
                        // 黄 → 橙
                        color = mix(vec3(1.0, 1.0, 0.0), vec3(1.0, 0.5, 0.0), (normalized - 0.5) * 4.0);
                    } else {
                        // 橙 → 红
                        color = mix(vec3(1.0, 0.5, 0.0), vec3(1.0, 0.0, 0.0), (normalized - 0.75) * 4.0);
                    }
                    return color;
                }

void main() {
                    // 获取色温颜色
                    vec3 color = getTemperatureColor(vHeight);
                    
                    // 最终颜色
                    gl_FragColor = vec4(color, 0.8);
                }
            `;

// 创建着色器材质
            const material = new THREE.ShaderMaterial({
                vertexShader: vertexShader,
                fragmentShader: fragmentShader,
                uniforms: {
                    uMinY: { value: minY },
                    uMaxY: { value: maxY }
                },
                wireframe: false,
                transparent: true,
                side: THREE.DoubleSide
            });

return material;
        }

// 创建加载器
        const loader = new THREE.GLTFLoader();

// 加载模型
        loader.load('https://threejs.org/examples/models/gltf/IridescenceLamp.glb',
            (gltf) => {
                const model = gltf.scene;
                // 计算模型的包围盒
                const box = new THREE.Box3().setFromObject(model);
                const minY = box.min.y;
                const maxY = box.max.y;

// 创建基于模型高度范围的热力图材质
                const heatMapMaterial = createHeatMapMaterial(minY, maxY);

// 遍历模型的所有子对象，应用着色器材质
                model.traverse((child) => {
                    if (child.isMesh) {
                        // 应用热力图材质
                        child.material = heatMapMaterial;
                    }
                });

// 将模型添加到场景
                scene.add(model);
            },
        );

// 添加轨道控制器
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;

// 添加网格辅助
        const gridHelper = new THREE.GridHelper(30, 30, 0x004466, 0x002244);
        gridHelper.position.y = -1;
        scene.add(gridHelper);

// 动画循环
        function animate() {
            requestAnimationFrame(animate);
            // 更新控制器
            controls.update();
            // 渲染场景
            renderer.render(scene, camera);
        }

// 处理窗口大小变化
        function handleResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

window.addEventListener('resize', handleResize);

// 启动动画
        animate();
    </script>
</body>

</html>