【three】给立方体的每个面加载不同贴图

Simaoya

于 2025-05-19 10:19:32 发布

阅读量206

点赞数 2

分类专栏： threejs vue 文章标签：贴图 javascript 前端

本文链接：https://blog.csdn.net/Anlittlecat/article/details/148057301

版权

vue 同时被 2 个专栏收录

38 篇文章

订阅专栏

threejs

3 篇文章

订阅专栏

效果图：
在这里插入图片描述
主要代码：

initCube() {
      let _this = this
      const geometry = new Three.BoxGeometry(1, .3, .5)
      let TextureLoader = new Three.TextureLoader()
      let mater1
      TextureLoader.load(
        require('@/assets/images/bg2.jpg'),
        function (texture){
          console.log(texture)
          mater1 = new Three.MeshBasicMaterial({map:texture})
          //顺序：右、左、上、下、正、背
          var materialsbg = [
            new Three.MeshBasicMaterial({ color: 0x00ff00 }),
            new Three.MeshBasicMaterial({ color: 0x00ff00 }),
            new Three.MeshBasicMaterial({ color: 0x000000 }),
            new Three.MeshBasicMaterial({ color: 0x00ff00 }),
            mater1,
            new Three.MeshBasicMaterial({ color: 0x00ff00 })
          ];
          console.log(geometry)
          const cube = new Three.Mesh(geometry, materialsbg)
          _this.scene.add(cube)
        }
      )
      
    },