分享B站视频，一种降维打击的可视化方案 https://b23.tv/oHdwMS 源码地址：ht

Question

分享B站视频，一种降维打击的可视化方案 https://b23.tv/oHdwMS 源码地址：https://github.com/KikiLetGo/DimReduce 用threejs框架写的，有兴趣的盆友可以clone自己修改，比如高斯帕曲线这种更加圆润的曲线或许效果也不错[doge]，但是voxel的堆叠方式有点麻烦，我还没有实现[doge] ps:5阶三维希尔伯特曲线堆叠voxle可能电脑会很卡，可以先把源码中改为3阶的试试[脱单doge] ​ 数据存储？三维应该不算啥，N维数据也可轻松化为二维数据存储在磁盘上

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

这段代码使用了Three.js库来创建三维空间中的可视化效果。首先，我们需要定义一个函数来生成三维空间中的点，并且将这些点放入一个数组中。然后，我们可以通过递归的方式来生成更多的点，直到达到指定的层数。

以下是完整的代码：

function generatePoints(depth, width) {
    let points = [];
    for (let i = 0; i < depth; i++) {
        let x = Math.random() * width;
        let y = Math.random() * width;
        let z = Math.random() * width;
        points.push([x, y, z]);
    }
    return points;
}

function createVoxels(points, depth, width) {
    let voxels = [];
    for (let i = 0; i < depth; i++) {
        let row = [];
        for (let j = 0; j < width; j++) {
            let voxelIndex = Math.floor(j / depth);
            let index = i * width + j;
            if (index >= points.length) {
                continue;
            }
            row.push({
                x: points[index][0],
                y: points[index][1],
                z: points[index][2]
            });
        }
        voxels.push(row);
    }
    return voxels;
}

function renderVoxels(voxels, depth, width, canvas) {
    const ctx = canvas.getContext('2d');
    let offset = 0;
    for (let i = 0; i < depth; i++) {
        for (let j = 0; j < width; j++) {
            let x = j * width / width;
            let y = i * width / width;
            let color = `rgb(${offset}, ${offset}, ${offset})`;
            ctx.beginPath();
            ctx.arc(x, y, 1, 0, 2 * Math.PI);
            ctx.fillStyle = color;
            ctx.fill();
            offset += 1;
        }
    }
}

在这个代码中，generatePoints 函数用于生成三维空间中的点，createVoxels 函数用于将这些点转换成voxel网格，而 renderVoxels 函数则用于渲染voxel网格。

最后，我们将所有这些功能组合在一起，以创建一个能够展示三维空间中点的可视化效果的界面。

注意，这个代码是作为一个示例，你可以根据自己的需求进行调整和优化。