最近项目中遇到一个需求,需要创建一个类似词云的旋转体,自动旋转切展示图片。这个时候echarts的词云是无法满足需求的。于是就打算用threejs自己处理一个。
思路梳理
1.首先,静态的将每个节点随机显示在三维空间中,组成一个球体
2.让球体转起来
代码
1.首先创建场景,相机和渲染器,因为要保持文字和图片一直向上,不会跟随旋转改变方向,所以还要引入css2DRender渲染器
// 环境
let scene: any = null;
// 灯光
let ambientLight = null;
// 相机
let camera: any = null;
let option = {
cameraDepth: 25,
cameraPosition: [0, 250, 500],
};
function initCircle() {
// 场景创建
scene = new THREE.Scene();
// 添加光源
ambientLight = new THREE.AmbientLight(0xededed, 1);
// 相机创建(透视相机)
camera = new THREE.PerspectiveCamera(
option.cameraDepth,
500 / 500,
0.1,
1500
);
camera.position.x = option.cameraPosition[0];
camera.position.y = option.cameraPosition[1];
camera.position.z = option.cameraPosition[2];
camera.lookAt(0, 0, 0);
// 环境光(可根据需求减少或更改颜色位置等)
let directionalLight = new THREE.DirectionalLight(0xffffff, 0.9);
directionalLight.position.set(0, 10, 5);
let directionalLight2 = directionalLight.clone();
directionalLight2.position.set(0, 10, -5);
let directionalLight3 = directionalLight.clone();
directionalLight3.position.set(5, 10, 0);
let directionalLight4 = directionalLight.clone();
directionalLight4.position.set(-5, 10, 0);
scene.add(ambientLight);
scene.add(directionalLight);
scene.add(directionalLight2);
scene.add(directionalLight3);
scene.add(directionalLight4);
// 渲染器
const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
document.getElementById("circle").appendChild(renderer.domElement);
renderer.setSize(500, 500);
// css2D渲染器添加
const labelRenderer = new CSS2DRenderer();
labelRenderer.domElement.style.position = "absolute";
labelRenderer.domElement.style.top = "0px";
labelRenderer.domElement.style.pointerEvents = "none";
labelRenderer.setSize(500, 500);
document.getElementById("circle").appendChild(labelRenderer.domElement);
// 鼠标控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.update();
// 禁止拖动缩放等,设为false为禁止
controls.enableZoom = true;
controls.enableRotate = true;
controls.enablePan = true;
scene.rotation.x = 0;
scene.rotation.y = 0;
scene.rotation.z = 0;
// 这是渲染器,更新
// 旋转动画的核心
const animate = () => {
requestAnimationFrame(animate);
// TWEEN.update();
scene.rotation.x += 0.01;
// scene.rotation.y += 0.01;
controls.update();
renderer.render(scene, camera);
labelRenderer.render(scene, camera);
};
animate();
// 创造dom节点,css2D节点
createDom();
}
2.动态计算每个节点的位置,因为要部署成一个球体,所以y轴和z轴的位置是根据X轴的位置变化的,这里是需要有一些数学知识才好理解,主要是三角函数,r为球体半径,x轴坐标和y轴坐标在球体的切面圆里是x,y,r组成一个之间三角形,根据三角函数,x,r已知,通过反cos函数得到对应夹角xa,在通过r和xa可以求得y轴最大长度,然后随机生成y轴长度,同理根据x,y可以的到第三天边L的长度,根据L和r,重复上面的计算可以得到Z轴的长度
// 创建文字
let r = 100;
let center = [0, 0];
// 数据列表,自己补充
const timeList = ref([
{
event_id: 1,
title: "我很棒",
key_word_highlight: "我出生于大河北穷苦的小户人家",
key_word_img:
"https://csjdweb.hdwbcloud.com/uploadfiles/banner_img/20230113/202301131557231810.jpg",
},
{}
]);
function createDom() {
let group = new THREE.Object3D();
timeList.value.forEach((val, idx) => {
// 随机生成x坐标
// 根据x值计算y值和z值
let x = center[0] + Math.random() * r * Math.sign(Math.random() - 0.5);
let xa = Math.acos(Math.abs(x - center[0]) / r);
let yr = r * Math.sin(xa);
let y = center[1] + Math.random() * yr * Math.sign(Math.random() - 0.5);
let α = Math.atan(Math.abs(y - center[1]) / Math.abs(x - center[0]));
let l = Math.abs(x - center[0]) / Math.cos(α);
let β = Math.acos(l / r);
let z = r * Math.sin(β) * Math.sign(Math.random() - 0.5);
if (val.key_word_img) {
let img = createIcon(x, y, z, val);
group.add(img);
} else {
let label = createLabel(x, y, z, val);
group.add(label);
}
});
scene.add(group);
}
3.根据左边绘制css2D对象,就属部署节点
function createLabel(x, y, z, val) {
// 根据想xyz定位文字位置
const div = document.createElement("div");
div.style.color = "#000";
div.style.fontSize = "16px";
// div.style.textShadow = "1px 1px 2px #047cd6";
div.textContent = val.title;
const label = new CSS2DObject(div);
// label.scale.set(0.01, 0.01, 0.01);
label.position.set(x, -y, z);
label.name = val.title;
return label;
}
// 创建图标
const createIcon = (x, y, z, val) => {
// const url = val.key_word_img;
var imgElement = document.createElement("img");
imgElement.src = val.key_word_img; // 替换为你的图片路径
imgElement.style.width = "50px";
imgElement.style.height = "50px";
const img = new CSS2DObject(imgElement);
// label.scale.set(0.01, 0.01, 0.01);
img.position.set(x, -y, z);
img.name = val.title;
return img;
};
至此已经完成页面布局
4.让页面旋转起来(第一步代码里面已经包含了)
const animate = () => {
requestAnimationFrame(animate);
// TWEEN.update();
scene.rotation.x += 0.01;
// scene.rotation.y += 0.01;
controls.update();
renderer.render(scene, camera);
labelRenderer.render(scene, camera);
};
其中
scene.rotation.x += 0.01;
可以设置围绕x,y,z轴的旋转速率
总结
之所以选择用threejs处理,因为直接用dom节点处理的话会出现不流畅的情况。用svg处理会每次都重新渲染,占用大量的CPU和GPU。用threejs,使用引擎处理,会降低cpu,只占用GPU,提高项目流畅度。