three.js 热力图

news2024/11/13 13:25:49

使用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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2149754.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[PTA]7-3 乘法口诀数列

[PTA]7-3 乘法口诀数列 输出格式&#xff1a; 在一行中输出数列的前 n 项。数字间以 1 个空格分隔&#xff0c;行首尾不得有多余空格。 输入样例&#xff1a; 2 3 10 输出样例&#xff1a; 2 3 6 1 8 6 8 4 8 4 样例解释&#xff1a; 数列前 2 项为 2 和 3。从 2 开始&#…

Java集合(三)

目录 Java集合&#xff08;三&#xff09; Java双列集合体系介绍 HashMap类 HashMap类介绍 HashMap类常用方法 HashMap类元素遍历 LinkedHashMap类 LinkedHashMap类介绍 LinkedHashMap类常用方法 LinkedHashMap类元素遍历 Map接口自定义类型去重的方式 Set接口和Ma…

grafana 使用常见问题

一、点击 panel 没有反应&#xff0c;没有出现 edit 选项。 方法一 将鼠标放在 panel 的任意位置&#xff0c;然后键盘输入 "e"&#xff0c;然后再次点击 title&#xff0c;即可出现选项框。 方法二 F12 查看当前 panel id&#xff0c;然后在浏览器 url 地址上拼接…

探索AI大模型的未来:电信运营商与云服务商的新征途@附58页PDF文件下载

在数字化浪潮的推动下&#xff0c;人工智能&#xff08;AI&#xff09;大模型正成为推动行业变革的关键力量。近日&#xff0c;腾讯云联合中国信通院及中国通信标准化协会发布了《2024年AI大模型应用发展研究报告》&#xff0c;深入探讨了电信运营商与云服务商在AI大模型领域的…

Unicode与UTF-8的关系

Unicode又称统一码&#xff0c;万国码。uni是一个英文词根&#xff0c;原型是one, 表示“单一, 一个”&#xff0c;所以unicode本意是“一个码”&#xff0c;就是让每个字符都有一个唯一的编码。它就像个武林盟主&#xff0c;把世上所有的语言符号一勺烩&#xff0c;一统了编码…

反相求和电路设计

1 简介 该电路可对两个输入信号进行求和&#xff08;相加&#xff09;&#xff0c;并将其在输出端反相。输入信号通常要求低阻抗源&#xff0c;因为该电路的输入阻抗由输入电阻R1和R2决定。反相放大器的共模电压等于连接到同相节点的电压。 2 设计目标 2.1 输入 2.2 输出 2.3…

9.4 溪降技术:带包下降

目录 9.4 携包下降概述观看视频课程电子书&#xff1a;携包下降在瀑布中管理背包扔背包滑索传送背包固定到安全带 V7 提示&#xff1a;将背包固定到安全带总结 9.4 携包下降 概述 在水流和悬崖边缘携包下降是最危险的情况&#xff01; 正如我们之前所学&#xff0c;在峡谷探险中…

Tomcat 后台弱⼝令部署war包

漏洞原理 在tomcat8环境下默认进⼊后台的密码为 tomcat/tomcat &#xff0c;未修改造成未授权即可进⼊后台&#xff0c;或者管理员把密码设置成弱⼝令。 影响版本 全版本(前提是⼈家存在弱⼝令) 环境搭建 8 cd vulhub-master/tomcat/tomcat8 docker-compose up -d 漏洞复…

AD9854 为什么输出波形幅度受限??

&#x1f3c6;本文收录于《全栈Bug调优(实战版)》专栏&#xff0c;主要记录项目实战过程中所遇到的Bug或因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&am…

【CSS in Depth 2 精译_035】5.5 Grid 网格布局中的子网格布局(全新内容)

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一章 层叠、优先级与继承&#xff08;已完结&#xff09; 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位&#xff08;已完结&#xff09; 2.1 相对…

C++速通LeetCode中等第6题-找到字符串中所有字母异位词(滑动窗口最详细代码注释)

滑动窗口法&#xff1a; class Solution { public:vector<int> findAnagrams(string s, string p) {unordered_map<char,int> need,window;for(char c : p) need[c];int left 0,right 0;int valid 0;vector<int> res;//窗口数据更新while(right < s.s…

FDM3D打印系列——黑悟空打印

大家好&#xff0c;我是阿赵。   最近很火的黑神话悟空&#xff0c;阿赵我没有玩&#xff0c;原因是没时间。不过看着身边的同事都在玩&#xff0c;我也心痒难耐&#xff0c;所以我打印了一个悟空的模型&#xff0c;并且自己配了色。 打印这个悟空模型&#xff0c;过程是一波…

Telephony VOWIFI

1、VOWIFI框架 参考3GPP 23402文档, VOWIFI有如下相关架构设置。 1、S2a信任的WIFI热点 2、S2b非信任WIF热点 3、S2c直联核心WIF热点 目前使用比较多的为S2b非信任WIF热点。 2、EPDG建立过程 //Telephony Log IWLAN拨号 08-30 21:36:34.702857 1347 5131 D ConnectivityS…

【后端开发】JavaEE初阶——计算机是如何工作的???

前言&#xff1a; &#x1f31f;&#x1f31f;本期讲解计算机工作原理&#xff0c;希望能帮到屏幕前的你。 &#x1f308;上期博客在这里&#xff1a;【MySQL】MySQL中JDBC编程——MySQL驱动包安装——&#xff08;超详解&#xff09; &#x1f308;感兴趣的小伙伴看一看小编主…

深入理解ConcurrentHashMap

HashMap为什么线程不安全 put的不安全 由于多线程对HashMap进行put操作&#xff0c;调用了HashMap的putVal()&#xff0c;具体原因&#xff1a; 1、假设两个线程A、B都在进行put操作&#xff0c;并且hash函数计算出的插入下标是相同的&#xff1b; 当线程A执行完第六行由于时间…

基于milvus数据库的RAG-Demo

1.上传文本并将文本向量化 import os from django.conf import settings from langchain.document_loaders import TextLoader from langchain.text_splitter import RecursiveCharacterTextSplitter, CharacterTextSplitter from langchain.vectorstores import Chroma from l…

数据结构-2.7.单链表的查找与长度计算

注&#xff1a;本文只探讨"带头结点"的情况(查找思路类似循环找到第i-1 个结点的代码) 一.按位查找&#xff1a; 1.代码演示&#xff1a; 版本一&#xff1a; #include<stdio.h> #include<stdlib.h> ​ ​ //定义单链表结点类型 typedef struct LNo…

契约锁与您相约2024新疆数字经济创新大会暨新疆数字丝路博览会

9月20日&#xff0c;由新疆数字经济联合会主办&#xff0c;多家行业协会及企业共同承办的“2024(第一届)新疆数字经济创新发展大会暨新疆数字丝路博览会”在新疆国际会展中心盛大开幕&#xff0c;活动期间&#xff0c;契约锁作为电子签章行业领先的服务商携数字可信系列产品亮相…

自然语言处理-基于注意力机制的文本匹配

背景&#xff1a; 任务三&#xff1a;基于注意力机制的文本匹配 输入两个句子判断&#xff0c;判断它们之间的关系。参考ESIM&#xff08;可以只用LSTM&#xff0c;忽略Tree-LSTM&#xff09;&#xff0c;用双向的注意力机制实现。 参考 《神经网络与深度学习》 第7章 Reaso…

MT6765/MT6762(R/D/M)/MT6761(MT8766)安卓核心板参数比较_MTK联发科4G智能模块

联发科Helio P35 MT6765安卓核心板 MediaTek Helio P35 MT6765是智能手机的主流ARM SoC&#xff0c;于2018年末推出。它在两个集群中集成了8个ARM Cortex-A53内核&#xff08;big.LITTLE&#xff09;。四个性能内核的频率高达2.3GHz。集成显卡为PowerVR GE8320&#xff0c;频率…