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();}