使用ThreeJS添加纹理的方法

admin

使用TextureLoader的方法，添加图片进行load

5 `6 O: k3 k! E7 w, G结果如下：
( R2 q: _; \/ i- ~& m: n4 H
0 P4 ~2 y( N6 X8 Y* ]8 |' B

this.loader = new TextureLoader()
0 q. }, B) Y" ~! C
const {headerMaterial,middleMaterial,bottomMaterial} = this.loadTexture ()
7 |) Z6 {% y) {9 O# |" ?4 L# f

/ L: ?* D3 y  C3 `

loadTexture () {

8 I6 K7 Z- K2 b! T4 q: p        const headerTexture = this.loader.load('/game/res/images/head.png')
- c, i9 f4 R2 P8 H; Z+ ?  ?        const bottomTexture = this.loader.load('/game/res/images/bottom.png')
  C$ P+ E; H( o7 y5 w( E% D        const middleTexture = this.loader.load('/game/res/images/middle.png')


! x( Y0 C1 b+ O0 S! ]# e. W        const headerMaterial = new MeshBasicMaterial({
            map: headerTexture
        })
        const middleMaterial = new MeshBasicMaterial({
- R3 S$ J, D$ ]& W( _8 {            map: middleTexture
# X+ H: r* X" R4 R        })
/ \* ^' z% |* P. s        const bottomMaterial = new MeshBasicMaterial({
1 L& n- _5 x0 d            map: bottomTexture
* Z. }$ q6 _9 r        })
6 E5 d) \- M! d2 \4 _' d# T2 A# _) M
        return {headerMaterial,middleMaterial,bottomMaterial}
0 [% B2 }6 _7 j, l0 M* _& m( v) V    }

4 x1 r9 g- x% `4 f/ I+ T! D