如何使用 ThreeJs 创建一个由每边 600 000 000 个迷你立方体组成的立方体？

Question

我想像在游戏中一样重新创建一个立方体好奇立方体里面是什么？每边由 600 000 000 个迷你立方体组成。我不能使用纹理来模拟我的迷你立方体，因为当我点击它时，迷你立方体必须有视觉变化。

我尝试了一个有 2 个面的 BoxGeometry() 物体作为迷你立方体

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer({
        alpha: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    //There is my cube
    var geometry = new THREE.BoxGeometry(20, 20, 20, 24494, 24494, 24494);
    var material = new THREE.MeshBasicMaterial({
        color: 0xfd59d7
    });

    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 100;

    render();

    function render() {
        renderer.render(scene, camera);
    }

那么我如何创建一个每边有 600 000 000 个迷你立方体的立方体，可以在笔记本上呈现？

Answer 1

我可以向您保证，好奇号实际上并没有展示一个由每边 600,000,000 个立方体制成的立方体。当前的 GPU 无法以平滑的帧率绘制 600,000,000 个立方体。如上所述，每边有 72 亿个三角形。你可以同时看到一个立方体的 3 个面，所以在 30fps 下，这就是每秒 6480 亿个三角形。即使是 NVidia 1080 GT（2017 年接近顶级性能的显卡）也只能每秒绘制理论上的 110 亿个三角形，这只是理论上的。实际上它永远达不到那个速度。

在好奇号中最好的情况是，当您看到整个立方体时，它只显示一个 12 多边形的立方体，其中一个像素表示超过 1 个立方体（如果每边真的有 600,000,000 个立方体），因为这需要24494x24494 的纹理。 That's 5x to 10x what any phone can display in a single texture。是的，您可以将立方体的面细分为更小的多边形，每个使用不同的纹理。这将需要每面 2.3gig 的纹理或整个立方体 13.4gig 的内存。手机没有 13.4 gig 的内存。

如果它真的是每边 6 亿个立方体，那么您可以做的最好的事情就是 google 地图，其中所有数据都存储在服务器上，并且各种表示形式会流式传输给用户。当用户缩小以查看整个立方体时，会显示每边 1024x1024（100 万像素）的一些表示，并且当您放大显示立方体的较小部分的不同表示时，将被下载和显示。

如何使用 ThreeJs 创建一个由每边 600 000 000 个迷你立方体组成的立方体？

How to create a cube formed by 600 000 000 mini-cubes per side with ThreeJs?

javascript

webgl

three.js