当前位置：首页 > article >正文

three.js 热力图

article 2024/11/13 15:09:59

使用three.js 和 heatMap.js 实现在三维场景中展示热力图的效果，以下代码复制粘贴即可在你的本机运行。

在线编辑运行预览可方位 https://threehub.cn/#/codeMirror?navigation=ThreeJS&classify=expand&id=heatmap3D
在 https://threehub.cn 中还有很多案例

在这里插入图片描述

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://z2586300277.github.io/three-cesium-examples/js/heatmap.js"></script>
<script type="importmap">
{
    "imports": {
        "three": "https://threejs.org/build/three.module.min.js",
        "three/addons/": "https://threejs.org/examples/jsm/",
        "three/examples/jsm/": "https://threejs.org/examples/jsm/",
        "gsap": "https://z2586300277.github.io/3d-file-server/js/gsap/index.js",
        "postprocessing": "https://z2586300277.github.io/three-cesium-examples/js/postprocessing.js",
        "dat.gui": "https://z2586300277.github.io/three-cesium-examples/js/dat.gui.module.js",
        "@tweenjs/tween.js": "https://z2586300277.github.io/three-cesium-examples/js/tween.esm.js"
    }
}
</script>
<style>
    body {
        margin: 0;
        padding: 1px;
        box-sizing: border-box;
        background-color: #1f1f1f;
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    #box {
        width: 100%;
        height: 100%;
    }
</style>
</head>
<body>
<div id="box"></div>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import * as dat from 'dat.gui'
/* heatmap.js 自行安装module 方式引入  此处我为src 方式引入  */

const DOM = document.getElementById('box')

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(75, DOM.clientWidth / DOM.clientHeight, 0.1, 1000)

camera.position.set(0, 40, 40)

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })

renderer.setSize(DOM.clientWidth, DOM.clientHeight)

DOM.appendChild(renderer.domElement)

new OrbitControls(camera, renderer.domElement)

scene.add(new THREE.AxesHelper(500), new THREE.AmbientLight(0xffffff, 3))

window.onresize = () => {

    renderer.setSize(DOM.clientWidth, DOM.clientHeight)

    camera.aspect = DOM.clientWidth / DOM.clientHeight

    camera.updateProjectionMatrix()

}

animate()

// 渲染 
function animate() {

    renderer.render(scene, camera)

    requestAnimationFrame(animate)

}

const getRandom = (max, min) => Math.round((Math.random() * (max - min + 1) + min) * 10) / 10

var heatmap = h337.create({
    container: document.createElement('div'),
    width: 256,
    height: 256,
    blur: '0.8',
    radius: 10
});

var i = 0, max = 10, data = [];
while (i < 2000) {
    data.push({ x: getRandom(1, 256), y: getRandom(1, 256), value: getRandom(1, 6) });
    i++;
}

heatmap.setData({
    max: max,
    data: data
});

const texture = new THREE.CanvasTexture(heatmap._renderer.canvas);
const geometry = new THREE.PlaneGeometry(50, 50, 1000, 1000);
geometry.rotateX(-Math.PI * 0.5);

const material = new THREE.ShaderMaterial({
    uniforms: {
        heightMap: { value: texture },
        heightRatio: { value: 5 }
    },
    vertexShader: `	uniform sampler2D heightMap;
			uniform float heightRatio;
			varying vec2 vUv;
			varying float hValue;
			varying vec3 cl;
			void main() {
			    vUv = uv;
			    vec3 pos = position;
		        cl = texture2D(heightMap, vUv).rgb;
		        hValue = texture2D(heightMap, vUv).r;
		        pos.y = hValue * heightRatio;
		        gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.0);
		    }`,
    fragmentShader: `varying float hValue;
			varying vec3 cl;
			void main() {
		 		float v = abs(hValue - 1.);
		 		gl_FragColor = vec4(cl, .8 - v * v) ; 
		    }`,
    transparent: true,
})

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

new dat.GUI().add(mesh.material.uniforms.heightRatio, "value", 1, 15).name("heightRatio")






</script>
</body>
</html>