Three.js技术问题：给旋转立方体加骰子纹理遇材质属性错误

嘿，这个问题我熟！咱们来一步步解决它～

报错根源 #

你之所以会看到 Three.js - THREE.MeshLambertMaterial: 'texture' is not a property of this material 这个错误，核心原因是你把加载好的纹理直接赋值给了MeshLambertMaterial的texture属性，但这个属性根本不存在！Three.js里的材质纹理都是通过map属性来绑定的，texture并不是MeshLambertMaterial的有效配置项。

正确的实现步骤 #

1. 用map属性绑定纹理到材质

加载完纹理后，要把纹理赋值给材质的map字段，而不是texture。举个例子：

// 假设你已经加载好6个骰子纹理，存在textures数组中
const diceMaterials = textures.map(texture => {
  // 正确写法：用map属性绑定纹理
  return new THREE.MeshLambertMaterial({ map: texture });
});

2. 注意多材质的版本兼容问题

如果你的Three.js版本比较新，THREE.MultiMaterial已经被废弃了！现在更推荐的做法是直接将材质数组传给Mesh的material参数，不需要再用MultiMaterial包裹：

// 创建立方体几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 直接传入材质数组即可，BoxGeometry默认每个面对应一个材质索引
const diceCube = new THREE.Mesh(cubeGeometry, diceMaterials);
scene.add(diceCube);

如果你的版本还在用旧版的MultiMaterial，也可以这样写，但还是建议升级到新写法：

const multiMaterial = new THREE.MultiMaterial(diceMaterials);
const diceCube = new THREE.Mesh(cubeGeometry, multiMaterial);

3. 确保纹理加载完成后再初始化材质

别忘了纹理加载是异步操作！如果在纹理还没加载好的时候就创建材质，可能会出现纹理不显示的问题。可以用LoadingManager来监听所有纹理加载完成的事件：

const loadingManager = new THREE.LoadingManager();
const textureLoader = new THREE.TextureLoader(loadingManager);
const textures = [];

// 加载6个骰子纹理
for (let i = 1; i <= 6; i++) {
  const texture = textureLoader.load(`${i}.jpg`);
  textures.push(texture);
}

// 所有纹理加载完成后再创建材质和立方体
loadingManager.onLoad = function() {
  const diceMaterials = textures.map(t => new THREE.MeshLambertMaterial({ map: t }));
  const diceCube = new THREE.Mesh(new THREE.BoxGeometry(1,1,1), diceMaterials);
  // 加上你之前的旋转逻辑
  diceCube.rotation.x = 0.5;
  diceCube.rotation.y = 0.5;
  scene.add(diceCube);
};

最后检查点 #

• 确认你的纹理路径正确，Chrome调试器里显示加载成功就没问题
• 确保场景里有光源（MeshLambertMaterial需要光源才能显示颜色/纹理，不然会是黑色）

内容的提问来源于stack exchange，提问作者user9377140