threeJS-RFM模型
threeJS官方文档-three.js docs
RMF模型效果展示：
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]; //最外层dom
this.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.35
this.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();
}
