threejs创建一个类似词云的旋转体

最近项目中遇到一个需求，需要创建一个类似词云的旋转体，自动旋转切展示图片。这个时候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，提高项目流畅度。