javascript - 与 MeshBasicMaterial 相比，ThreeJS MeshStandardMaterial 在移动设备上太慢

Question

我有以下代码在场景中添加立方体，当我在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);

Answer 1

MeshStandardMaterial 是 PBR Material ，而 MeshBasicMaterial 是无光照 Material 。所以后者的渲染性能要好很多。但是，它不会对任何灯光使用react，因此其简单的视觉外观无法与更高级的 MeshStandardMaterial 相比。

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

三.js R108