与 MeshBasicMaterial 相比，ThreeJS MeshStandardMaterial 在移动设备中速度太慢答案

【问题标题】：ThreeJS MeshStandardMaterial is too slow in mobile device compared to MeshBasicMaterial与 MeshBasicMaterial 相比，ThreeJS MeshStandardMaterial 在移动设备中速度太慢
【发布时间】：2019-09-10 21:27:38
【问题描述】：

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

【问题讨论】：

标签： javascript html three.js

【解决方案1】：

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

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

three.js R108

【讨论】：