threeJS-RFM模型

2024-01-31 13:40
文章标签 模型 threejs rfm

本文主要是介绍threeJS-RFM模型,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

threeJS-RFM模型

threeJS官方文档-three.js docs

PMF模型效果展示:

RFM模型的绘制

绘制流程:

  • 获取容器,创建基本类

  • 创建三维场景

  • 设置观察点

  • 设置渲染分辨率,避免绘图模糊

  • 绘制立方体和组

  • 绘制坐标轴

  • 绘制坐标轴文字及立方体描述文字

  • 立方体响应式,保证立方体不被拉伸和块状化

  • 整个组设置X方向的旋转并开启自动旋转

1.获取容器,创建基本类

  //容器this.container = this.$refs.container; //表示2D vector(二维向量)的类this.mouse = new THREE.Vector2(); //这个类用于进行光线投射。 光线投射用于进行鼠标拾取(在三维空间中计算出鼠标移过了什么物体)。this.raycaster = new THREE.Raycaster();//获取挂载DOM相对于视窗的位置集合const boundRect = this.container.getBoundingClientRect();this.boundRect = boundRect;

2.创建三维场景

this.scene = this.initScene(); //构建一个三维场景
​
initScene() {//构建一个三维场景const scene = new THREE.Scene();return scene;
}

3.设置观察点

this.camera = this.initCamera(boundRect); //设置观察点
​
initCamera(boundingBox) {
//创建一个透视摄像机
const camera = new THREE.PerspectiveCamera(15, boundingBox.width / boundingBox.height, 0.1, 1000); //设置 摄像机视锥体垂直视野角度、长宽比、近端面、远端面
camera.position.set(0, 0.5, 62);
return camera;
}

4.设置渲染分辨率,避免绘图模糊。

this.renderer = this.initRenderer(boundRect); //设置渲染分辨率
​initRenderer(boundingBox) {//设置渲染分辨率const renderer = new THREE.WebGLRenderer({alpha: true});//设置设备宽高renderer.setSize(boundingBox.width, boundingBox.height); //设置设备像素比。避免绘图模糊renderer.setPixelRatio(window.devicePixelRatio < 2 ? 2 : window.devicePixelRatio); renderer.setClearColor(0xeeeeee, 0.0); // 设置场景背景色
​this.container.appendChild(renderer.domElement);renderer.render(this.scene, this.camera); //渲染场景return renderer;}

5.绘制立方体。注意创建一个组 将立方体、坐标轴等都放入这个组,方便整体的操作。

 this.group = new THREE.Group(); //创建一个组 将立方体 坐标轴等都放入这个组 方便整体的操作
​const offset = 1.25;const posList = [//把8个立方体进行 x y z轴三个方向的偏移{ x: -offset, y: offset, z: offset },{ x: offset, y: offset, z: offset },{ x: -offset, y: offset, z: -offset },{ x: offset, y: offset, z: -offset },{ x: -offset, y: -offset, z: offset },{ x: offset, y: -offset, z: offset },{ x: -offset, y: -offset, z: -offset },{ x: offset, y: -offset, z: -offset }];
​let dataset= [{pos: posList[0], //坐标color: 'rgba(255,217,81,1)', //立方体颜色borderColor: 'rgb(250, 223, 127)', //边框颜色name: '重要价值用户-1' //name和code},{pos: posList[1],color: 'rgba(71,210,235,1)',borderColor: 'rgb(97, 203, 221)',name: '重要保持用户-3',code: 3},{pos: posList[2],color: 'rgba(137,220,87,1)',borderColor: 'rgb(160, 221, 123)',name: '重要发展用户-2'},{pos: posList[3],color: 'rgb(197, 103, 235)',borderColor: 'rgb(153, 81, 204)',name: '重要挽留用户-4'},{pos: posList[4],color: 'rgb(123,128,250)',borderColor: 'rgb(123,128,250)',name: '一般价值用户-5'},{pos: posList[5],color: 'rgb(248, 95, 87)',borderColor: 'rgb(253, 155, 150)',name: '一般保持用户-7'},{pos: posList[6],color: 'rgb(250, 134, 45)',borderColor: 'rgb(245, 162, 99)',name: '一般发展用户-6'},{pos: posList[7],color: 'rgba(36,128,223,1)',borderColor: 'rgb(92, 156, 221)',name: '一般挽留用户-8'}]
​this.dataset.forEach(item => {const cube = this.createBox(item.pos, item.color, item.name); //创建立方体this.group.add(cube);
​/* //BoxHelper用于图形化地展示对象世界轴心对齐的包围盒的辅助对象。此处即为立方体的线框let border = new THREE.BoxHelper(cube, item.borderColor);this.group.add(border); */});
​
​
createBox(pos, color, name) {//创建立方体const geometry = new THREE.BoxGeometry(2.2, 2.2, 2.2); //创建立体几何体const material = this.meshBasicMaterial({ color: color, name: name }); //决定了mesh模型中三角形的外观显示
​const cube = new THREE.Mesh(geometry, material); //基于以三角形为polygon mesh(多边形网格)的物体的类pos && cube.position.set(pos.x, pos.y, pos.z);
​return cube;},meshBasicMaterial(option) {//材质-基础网格材质const material = new THREE.MeshBasicMaterial({// wireframe: true, // 显示骨架transparent: true,opacity: 0.35,...option});
​return material;}

6.绘制坐标轴

  //坐标轴辅助this.setCoordinates(new THREE.Vector3(0, 10, 0));this.setCoordinates(new THREE.Vector3(0, -10, 0));this.setCoordinates(new THREE.Vector3(10, 0, 0));this.setCoordinates(new THREE.Vector3(-10, 0, 0));this.setCoordinates(new THREE.Vector3(0, 0, 10));this.setCoordinates(new THREE.Vector3(0, 0, -10));
​setCoordinates(dir) {//坐标轴dir.normalize(); //将该三维向量转化为单位向量 ; 基于箭头原点的方向var origin = new THREE.Vector3(0, 0, 0); //箭头的原点var length = 3.2; //箭头的长度var hex = 0x748097; //定义的16进制颜色值var headLength = 0.2; //箭头头部(锥体)的长度var headWidth = 0.2; //箭头头部(锥体)的宽度//三维箭头对象var arrowHelper = new THREE.ArrowHelper(dir, origin, length, hex, headLength, headWidth);this.group.add(arrowHelper);this.scene.add(this.group);},

7.绘制坐标轴文字及立方体描述文字

let textureData=[//坐标轴文字{pos: { x: 0, y: 3.4, z: 0 },dataURL: require('@/assets/img/personas/M+.svg'),width: { x: 0.6, y: 0.5, z: 0 }},{pos: { x: 0, y: -3.4, z: 0 },dataURL: require('@/assets/img/personas/M-.svg'),width: { x: 0.6, y: 0.5, z: 0 }}.......//模块文字{pos: { x: -2, y: 3, z: 2.5 },dataURL: require('@/assets/img/personas/RFMText1.svg'),width: { x: 1.1, y: 0.48, z: 0 }},{pos: { x: 2, y: 3, z: 2.5 },dataURL: require('@/assets/img/personas/RFMText2.svg'),width: { x: 1.1, y: 0.48, z: 0 }}.......]
​//绘制坐标轴文字及立方体描述文字this.textureData.forEach(item => {this.getTextureData(item.dataURL, item.pos, item.width);});
​
​getTextureData(dataURL, pos, width) {//文字描述let texture = new THREE.TextureLoader().load(dataURL); //加载文件const geometry = new THREE.BoxGeometry(width.x, width.y, width.z);const material = new THREE.MeshBasicMaterial({transparent: true,opacity: 1,map: texture});let rect = new THREE.Mesh(geometry, material);
​pos && rect.position.set(pos.x, pos.y, pos.z);this.group.add(rect);this.render();}
​render() {//渲染场景this.renderer.render(this.scene, this.camera);},

8.立方体响应式。检查渲染器的canvas尺寸是不是和canvas的显示尺寸不一样 如果不一样就设置它 可保证立方体不被拉伸和块状化

 //立方体响应式if (this.resizeRendererToDisplaySize(this.renderer)) {const canvas = this.renderer.domElement;this.camera.aspect = canvas.clientWidth / canvas.clientHeight;//更新相机投影矩阵,必须在参数发生变化后调用this.camera.updateProjectionMatrix();}
​
​resizeRendererToDisplaySize(renderer) {const canvas = renderer.domElement;const width = canvas.clientWidth;const height = canvas.clientHeight;const needResize = canvas.width !== width || canvas.height !== height;if (needResize) {renderer.setSize(width, height, false);}return needResize;}

9.整个组设置X方向的旋转并开启自动旋转。

自动旋转详见下面的事件模块

//整个组设置X方向的旋转this.group.rotation.set(0.2, 0, 0);//自动旋转this.animate(this.scene, this.camera, this.renderer, this.group);

RFM模型的事件

交互描述:

  • 立方体点击高亮该立方体。
  • 立方体可自动旋转。鼠标hover到图层时停止自动旋转,鼠标离开图层时开启自动旋转。
  • 记录鼠标按下到放开移动的距离并让立方体沿Y轴旋转相应的角度。

1.挂载事件

  this.container = this.$refs.container; //容器 let content = document.getElementsByClassName('app-wrapper')[0]; //最外层domthis.container.addEventListener('mousemove', this.mousemoveToCanvas, false);this.container.addEventListener('mouseleave', this.leaveToCanvas, false);this.container.addEventListener('click', this.coordsToCanvas, false);this.container.addEventListener('mousedown', this.onMouseDown, false);this.container.addEventListener('mouseup', this.onMouseup, false);content.addEventListener('mouseup', this.onMouseup, false);

2.立方体点击高亮。如果想hover高亮的话用这个方法也可实现。

// 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)const boundRect = this.container.getBoundingClientRect();this.mouse.x = ((evt.clientX - boundRect.left) / boundRect.width) * 2 - 1;this.mouse.y = (-(evt.clientY - boundRect.top) / boundRect.height) * 2 + 1;this.raycaster.setFromCamera(this.mouse, this.camera);var intersects = this.raycaster.intersectObjects(this.scene.children[0].children, false);this.voluntarily = false; //关闭自动旋转if (intersects.filter(item => item.object.type === 'Mesh')[0] && intersects.filter(item => item.object.type === 'Mesh')[0].object.material.name) {//所有立方体设置透明度为0.35this.scene.children[0].children.filter(item => item.type === 'Mesh').slice(0, 8).forEach(item => {item.material.opacity && (item.material.opacity = 0.35); });//当前hover或点击的立方体高亮intersects.filter(item => item.object.type === 'Mesh')[0].object.material.opacity = 0.7; this.render();} return this.mouse;
}

3.立方体可自动旋转。鼠标hover到图层时停止自动旋转,鼠标离开图层时开启自动旋转。

//自动旋转this.animate(this.scene, this.camera, this.renderer, this.group);animate(scene, camera, renderer, graphic) {//自动旋转 -沿Y轴旋转const _this = this;const step = function() {if (_this.voluntarily) {graphic.rotation.y -= 0.003;_this.group.rotation.y -= 0.003;}requestAnimationFrame(step);renderer.render(scene, camera);};step(scene, camera, graphic);},//hover停止自转mousemoveToCanvas() {this.voluntarily = false;}//鼠标离开图层时 开启自转leaveToCanvas() {this.setAllOpacity();this.voluntarily = true;} 

4.记录鼠标按下到放开移动的距离并让立方体沿Y轴旋转相应的角度。

 onMouseDown(event) {event.preventDefault();this.mouseDown = true;this.mouseX = event.clientX; //出发事件时的鼠标指针的水平坐标var rotateStart;rotateStart = new THREE.Vector2();rotateStart.set(event.clientX, event.clientY);document.addEventListener('mousemove', this.onMouseMove, false);},onMouseup(event) {this.mouseDown = false;document.removeEventListener('mousemove', this.onMouseMove);},onMouseMove(event, opt) {if (!this.mouseDown) {return;}//记录鼠标按下到放开移动的距离 并让立方体沿Y轴旋转相应的角度var deltaX = event.clientX - this.mouseX;this.mouseX = event.clientX;this.rotateScene(deltaX);},//设置模型旋转速度rotateScene(deltaX) {var deg = -deltaX / 279;//deg 设置模型旋转的弧度this.group.rotation.y -= deg;this.render();}

这篇关于threeJS-RFM模型的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/663960

相关文章

大模型研发全揭秘:客服工单数据标注的完整攻略

在人工智能(AI)领域,数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者,掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中,工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注,不仅能够帮助提升客服自动化系统的智能化水平,还能优化客户服务流程,提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行

Andrej Karpathy最新采访:认知核心模型10亿参数就够了,AI会打破教育不公的僵局

夕小瑶科技说 原创  作者 | 海野 AI圈子的红人,AI大神Andrej Karpathy,曾是OpenAI联合创始人之一,特斯拉AI总监。上一次的动态是官宣创办一家名为 Eureka Labs 的人工智能+教育公司 ,宣布将长期致力于AI原生教育。 近日,Andrej Karpathy接受了No Priors(投资博客)的采访,与硅谷知名投资人 Sara Guo 和 Elad G

Retrieval-based-Voice-Conversion-WebUI模型构建指南

一、模型介绍 Retrieval-based-Voice-Conversion-WebUI(简称 RVC)模型是一个基于 VITS(Variational Inference with adversarial learning for end-to-end Text-to-Speech)的简单易用的语音转换框架。 具有以下特点 简单易用:RVC 模型通过简单易用的网页界面,使得用户无需深入了

透彻!驯服大型语言模型(LLMs)的五种方法,及具体方法选择思路

引言 随着时间的发展,大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用,随着人们期望的不断增加,目标也发生了巨大的变化。在短短的几个月的时间里,人们对大模型的认识已经从对其zero-shot能力感到惊讶,转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构(例如Transformer)对海量的、多种多样的数据分布进行建模得到,它包含了大量的先验

图神经网络模型介绍(1)

我们将图神经网络分为基于谱域的模型和基于空域的模型,并按照发展顺序详解每个类别中的重要模型。 1.1基于谱域的图神经网络         谱域上的图卷积在图学习迈向深度学习的发展历程中起到了关键的作用。本节主要介绍三个具有代表性的谱域图神经网络:谱图卷积网络、切比雪夫网络和图卷积网络。 (1)谱图卷积网络 卷积定理:函数卷积的傅里叶变换是函数傅里叶变换的乘积,即F{f*g}

秋招最新大模型算法面试,熬夜都要肝完它

💥大家在面试大模型LLM这个板块的时候,不知道面试完会不会复盘、总结,做笔记的习惯,这份大模型算法岗面试八股笔记也帮助不少人拿到过offer ✨对于面试大模型算法工程师会有一定的帮助,都附有完整答案,熬夜也要看完,祝大家一臂之力 这份《大模型算法工程师面试题》已经上传CSDN,还有完整版的大模型 AI 学习资料,朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费

【生成模型系列(初级)】嵌入(Embedding)方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入(Embedding)方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节:嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”,它将文本中的单词或短语转换成计算机能够理解的数学形式,即向量。 正如翻译机将一种语言

AI Toolkit + H100 GPU,一小时内微调最新热门文生图模型 FLUX

上个月,FLUX 席卷了互联网,这并非没有原因。他们声称优于 DALLE 3、Ideogram 和 Stable Diffusion 3 等模型,而这一点已被证明是有依据的。随着越来越多的流行图像生成工具(如 Stable Diffusion Web UI Forge 和 ComyUI)开始支持这些模型,FLUX 在 Stable Diffusion 领域的扩展将会持续下去。 自 FLU

SWAP作物生长模型安装教程、数据制备、敏感性分析、气候变化影响、R模型敏感性分析与贝叶斯优化、Fortran源代码分析、气候数据降尺度与变化影响分析

查看原文>>>全流程SWAP农业模型数据制备、敏感性分析及气候变化影响实践技术应用 SWAP模型是由荷兰瓦赫宁根大学开发的先进农作物模型,它综合考虑了土壤-水分-大气以及植被间的相互作用;是一种描述作物生长过程的一种机理性作物生长模型。它不但运用Richard方程,使其能够精确的模拟土壤中水分的运动,而且耦合了WOFOST作物模型使作物的生长描述更为科学。 本文让更多的科研人员和农业工作者

线性因子模型 - 独立分量分析(ICA)篇

序言 线性因子模型是数据分析与机器学习中的一类重要模型,它们通过引入潜变量( latent variables \text{latent variables} latent variables)来更好地表征数据。其中,独立分量分析( ICA \text{ICA} ICA)作为线性因子模型的一种,以其独特的视角和广泛的应用领域而备受关注。 ICA \text{ICA} ICA旨在将观察到的复杂信号