Javascript 如何创建一个立方体,由每边60万个小立方体和三个JS组成?

Javascript 如何创建一个立方体,由每边60万个小立方体和三个JS组成?,javascript,three.js,webgl,Javascript,Three.js,Webgl,我想在游戏中重新创建一个立方体,好奇,立方体里面有什么?由每侧60万个小立方体组成。我不能使用纹理来模拟我的小立方体,因为当我点击它时,小立方体上必须有视觉变化 我尝试了一个带有两个面的BoxGeometry()对象作为一个迷你立方体 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100

我想在游戏中重新创建一个立方体,好奇,立方体里面有什么?由每侧60万个小立方体组成。我不能使用纹理来模拟我的小立方体,因为当我点击它时,小立方体上必须有视觉变化

我尝试了一个带有两个面的
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);
    }

那么,我如何才能创建一个每面有60万个小立方体的立方体,并且可以在笔记本上渲染呢?

我可以向您保证,好奇号实际上不会显示一个每面有60万个立方体的立方体。当前的GPU无法以平滑的帧速率绘制600000000个立方体。如上所述,每边有72亿个三角形。你可以一次看到一个立方体的三个面,以每秒30帧的速度,即每秒6480亿个三角形。即使是NVidia 1080 GT(2017年近乎顶级的性能卡)每秒也只能画110亿个三角形,这只是理论上的。事实上,它永远不会达到那样的速度

出于好奇,当您可以看到整个立方体时,它只会显示一个12多边形立方体,其中一个像素表示超过1个立方体(如果每侧确实有600000000个立方体),因为这需要24494x24494的纹理。是的,您可以使用不同的纹理将立方体的面细分为更小的多边形。这将需要每边2.3G的纹理或整个立方体13.4GG的内存。手机没有13.4千兆的内存


如果它真的是每边6亿个立方体,那么你最好能做的就是像GoogleMaps那样,所有数据都存储在服务器上,各种表示流式传输给用户。当用户缩小以查看整个立方体时,会显示每边1024x1024(100万像素)的一些表示,当您放大显示立方体较小部分的不同表示时,会下载并显示。

我可以向您保证,好奇号实际上不会显示每边600000000个立方体组成的立方体。当前的GPU无法以平滑的帧速率绘制600000000个立方体。如上所述,每边有72亿个三角形。你可以一次看到一个立方体的三个面,以每秒30帧的速度,即每秒6480亿个三角形。即使是NVidia 1080 GT(2017年近乎顶级的性能卡)每秒也只能画110亿个三角形,这只是理论上的。事实上,它永远不会达到那样的速度

出于好奇,当您可以看到整个立方体时,它只会显示一个12多边形立方体,其中一个像素表示超过1个立方体(如果每侧确实有600000000个立方体),因为这需要24494x24494的纹理。是的,您可以使用不同的纹理将立方体的面细分为更小的多边形。这将需要每边2.3G的纹理或整个立方体13.4GG的内存。手机没有13.4千兆的内存


如果它真的是每边6亿个立方体,那么你最好能做的就是像GoogleMaps那样,所有数据都存储在服务器上,各种表示流式传输给用户。当用户缩小以查看整个多维数据集时,会显示每边1024x1024(100万像素)的一些表示,当您放大显示多维数据集较小部分的不同表示时,会下载并显示这些表示。

请参见和。还请记住,您对单个网格的要求很高
BoxGeometry(50,50,50,500,500,500)
将生成每边有500000个三角形的网格。THREE.js可以在其场景中处理数百万个三角形,但在单个网格/绘制调用中处理300万个三角形有点太多。考虑把你的“小块”分割成单独的网格。谢谢,我试着改进我的答案。每边60万平方网格的threejs会比每边120万三角形的立方体网格表现更好吗?我现在记不起来了,但我认为你原来的帖子每边的正方形更少。这样看:如果你只画每个小立方体的外表面,每边60万个,那就是120万个三角形。从我个人的经验来看,我已经看到在仅仅300000个三角形(没什么特别的,只是一个渲染过程)之后,帧率骤降,这是在桌面上。是的,在我最初的帖子中我给出了一个更合理的数字,但我的目标是复制游戏好奇心,所以我试图澄清我的帖子。好奇的开发者使用了unity,但游戏是在智能手机上运行的!!这是怎么可能的呢?也许有人对Unity有更多的经验,可以在这里插话,但您正在查看在web浏览器中运行与在本机硬件上运行的区别。本机应用程序(即使在Unity框架内)自然会运行得更好。开发人员可能还使用了WebGL无法使用的渲染技术(例如,几何体和计算着色器)。请参阅和。还请记住,您对单个网格的要求很高
BoxGeometry(50,50,50,500,500,500)
将生成每边有500000个三角形的网格。THREE.js可以在其场景中处理数百万个三角形,但在单个网格/绘制调用中处理300万个三角形有点太多。考虑把你的“小块”分割成单独的网格。谢谢,我试着改进我的答案。每边60万平方网格的threejs会比每边120万三角形的立方体网格表现更好吗?我现在记不起来了,但我认为你原来的帖子每边的正方形更少。这样看:如果你只画每个小立方体的外表面,每边60万个,那就是120万个三角形。从我个人的经验来看,我已经看到在仅仅300000个三角形(没什么特别的,只是一个渲染过程)之后,帧率骤降,这是在桌面上。是的,在我最初的帖子中我给出了一个更合理的数字,但我的目标是复制游戏好奇心,所以我试图澄清我的帖子。好奇的开发者使用联合国