javascript - 如何使用 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 亿个三 Angular 形。您可以同时看到立方体的 3 个面，因此以 30 fps 的速率每秒可看到 6480 亿个三 Angular 形。即使是 NVidia 1080 GT(2017 年接近顶级性能的显卡)理论上每秒也只能绘制 110 亿个三 Angular 形，而且这只是理论上的。事实上它永远不会达到那个速度。

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

如果每面确实有 6 亿个立方体，那么您能做的最好的事情就是像谷歌地图一样，所有数据都存储在服务器上，并将各种表示形式传输给用户。当用户缩小以查看整个立方体时，会显示每边 1024x1024(100 万像素)的一些表示，而当您放大不同的表示时，会下载并显示立方体的较小部分。