Three.js 0.167.1版本 Cannot read properties of undefined (reading ‘elements‘)

1. 报错情况

2. 触发场景

initScene  () {
  const geometry = new THREE.PlaneGeometry(320, 180);
  geometry.rotateX(-Math.PI / 2);
  const texture = textureLoader.loadAsync(require("@/assets/textures/texture.png"));
  const material = new THREE.MeshStandardMaterial({
        map: texture,
        transparent: true
  });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
}

3. 问题分析

• 老版本中这样加载texture是没有问题的，在0.167.1版本中，一直在报错了，让大模型帮忙分析下，可能是纹理加载过程中出现问题。

• F12查看Network，这个纹理是有被成功请求的。

• 于是去查看textureLoader.loadAsync源码

	loadAsync( url, onProgress ) {

		const scope = this;

		return new Promise( function ( resolve, reject ) {

			scope.load( url, resolve, onProgress, reject );

		} );

	}

• 发现这里最终返回的是一个Promise，于是灵机一动。

4. 问题解决

使用 async, await，问题解决。

// async
async initScene  () {
  const geometry = new THREE.PlaneGeometry(320, 180);
  geometry.rotateX(-Math.PI / 2);
  // await
  const texture = await textureLoader.loadAsync(require("@/assets/textures/texture.png"));
  const material = new THREE.MeshStandardMaterial({
        map: texture,
        transparent: true
  });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
}