Question

我遵循vuejs项目中的threejs文档，使用导入图像：

texture.load( "./clouds" )

此代码不起作用，我必须使用require导入图像：

texture.load( require( "./clouds.png" ) )

现在我想使用函数来处理成功或出错，所以感谢互联网，我发现了

texture.load( require( "./clouds.png" ), this.onSuccess, this.onProgress, this.onError )

问题出在成功函数中，我想创建一个带有纹理的多维数据集，什么也没发生。我也尝试过使用成功功能在材质中添加颜色，但这没用。

onSuccess( image ) {

   this.material = new THREE.MeshLambertMaterial( { 
      color: 0xf3ffe2,
      map: image
   }

   this.generateCube()
}

generateCube() {

   let geometry = new THREE.BoxGeometry( 100, 100, 100 );

   this.forme = new THREE.Mesh( geometry, this.material );
   this.forme.position.z = -200
   this.forme.position.x = -100
   this.scene.add( this.forme );

},

Answer 1

您的问题与VueJS / ThreeJs（还是^^）无关，您应该学习如何在回调中使用this，这是E6修复程序：

texture.load( require( "./clouds.png" ), t => this.onSuccess(t), e => this.onProgress(e), e => this.onError(e) )

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 2

您可以将图像放在“公共”文件夹中。

然后您可以通过以下方式加载纹理

texture.load( "/clouds.png" )

在VueJS项目中使用threejs导入图像

2 个答案: