Question

我正在尝试用A-Frame项目的图像替换3D模型。我能够删除模型，并用原始框替换它，但是我尝试用作纹理的图像无法加载。将显示一个正确的框，但它显示随机颜色而不是图像。

我正在使用以下示例： https://gamedevacademy.org/aframe-vr-game-development/

我的代码：

// Create a new enemy entity.
createEnemy: function (enemyNumber) {
    var enemyId = "enemy" + enemyNumber.toString();
    var newEnemy = document.createElement('a-entity');
    newEnemy.setAttribute('geometry', {
      primitive: 'box',
      height: 1,
      width: 1,
      depth: 0.0001 ,

    });

    newEnemy.setAttribute( 'src' , 'lanternfly.png' );
    newEnemy.setAttribute('shader' , 'flat');
    newEnemy.setAttribute('transparent' , 'true');
    newEnemy.setAttribute('enemy', {'health': 1});
    newEnemy.setAttribute('static-body', '');
    newEnemy.setAttribute('id', enemyId);
    newEnemy.setAttribute('type', 'enemy');
    var position = this.chooseRandomPosition();
    var positionStr = position.x.toString() + ' ' + position.y.toString() + ' ' + position.z.toString();

    newEnemy.setAttribute('position', position);
    var destinationStr = '0 ' + position.y.toString() + ' 0';
    return newEnemy;
}

};

Answer 1

如material component documentation中所述。是：

newEnemy.setAttribute('material', {
  shader: 'flat',
  src: 'url(lanternfly.png)'
});

Working glitch example

您必须确保要从Web服务器提供图像文件，并且路径/路由正确。检查您的浏览器网络面板，确保已提取文件。

使用elem.setAttribute时图像不会显示

1 个答案: