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

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" )