javascript - 与MeshBasicMaterial相比，ThreeJS MeshStandardMaterial在移动设备中的速度太慢

我有以下代码在场景中添加多维数据集，当我在PC上的浏览器中打开页面时，它可以正常工作，但是当我在移动设备中打开时，控制速度太慢。从触摸获得响应需要3-4秒，而移动设备也会变慢。

好像我将MeshStandardMaterial更改为MeshBasicMaterial一样，一切正常。可能是什么问题。

sideWallMaterial = [new THREE.MeshStandardMaterial({
    roughness: 0.8,
    metalness: 0.2,
    bumpScale: 0.0055
  }),
  new THREE.MeshStandardMaterial({
    color: '#a6aea2',
    roughness: 0.8,
    metalness: 0.2,
    bumpScale: 0.0005,
    opacity: 0.5,
    transparent: true,
    depthWrite: false
  }),
  new THREE.MeshStandardMaterial({
    color: '#a6aea2',
    roughness: 0.8,
    metalness: 0.2,
    bumpScale: 0.0005
  }),
  new THREE.MeshStandardMaterial({
    color: '#a6aea2',
    roughness: 0.8,
    metalness: 0.2,
    bumpScale: 0.0005
  }),
  new THREE.MeshStandardMaterial({
    color: '#a6aea2',
    roughness: 0.8,
    metalness: 0.2,
    bumpScale: 0.0005
  }),
  new THREE.MeshStandardMaterial({
    color: '#a6aea2',
    roughness: 0.8,
    metalness: 0.2,
    bumpScale: 0.0005
  })
];

var textureLoader = new THREE.TextureLoader();
textureLoader.load("img1.jpg", function(map) {
  map.wrapS = THREE.RepeatWrapping;
  map.wrapT = THREE.RepeatWrapping;
  map.anisotropy = 4;
  map.repeat.set(10, 10);
  sideWallMaterial[0].map = map;
  sideWallMaterial[0].needsUpdate = true;

});
textureLoader.load("img2.jpg", function(map) {

  map.wrapS = THREE.RepeatWrapping;
  map.wrapT = THREE.RepeatWrapping;
  map.anisotropy = 4;
  map.repeat.set(10, 10);
  sideWallMaterial[0].bumpMap = map;
  sideWallMaterial[0].needsUpdate = true;

});
textureLoader.load("img3.jpg", function(map) {

  map.wrapS = THREE.RepeatWrapping;
  map.wrapT = THREE.RepeatWrapping;
  map.anisotropy = 4;
  map.repeat.set(10, 24);
  sideWallMaterial[0].roughnessMap = map;
  sideWallMaterial[0].needsUpdate = true;

});

var geometry = new THREE.BoxBufferGeometry(wall_t, wall_h, wall_w);
var material = new THREE.MeshLambertMaterial();
mesh = new THREE.Mesh(geometry, sideWallMaterial);
mesh.receiveShadow = true;
mesh.position.set(0, 0, 0);
scene.add(mesh);

最佳答案

MeshStandardMaterial是PBR材料，而MeshBasicMaterial是不发光的材料。因此，后者的渲染性能要好得多。但是，它对任何灯光都没有反应，因此其简单的视觉外观无法与更高级的MeshStandardMaterial相提并论。

还请记住，并非所有材料都具有相同的属性。您可以将凹凸和粗糙度贴图分配给MeshStandardMaterial，但不能分配给MeshBasicMaterial或MeshLambertMaterial（已在代码段中使用）。两种材质都只会忽略这些纹理，这意味着您可以保存各自的纹理解码和GPU上传。当然，这将改善初始的“编译/显示”性能。

three.js R108

关于javascript - 与MeshBasicMaterial相比，ThreeJS MeshStandardMaterial在移动设备中的速度太慢，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57869590/