使用ThreeJS添加纹理的方法

admin

* G7 n" l! b; t2 j* D3 z' ?使用TextureLoader的方法，添加图片进行load

3 V1 ]8 k9 G4 K1 j' V( u( C- b结果如下：
$ p: H0 b# B1 `9 Q( S
  |4 B( U( Q- n5 S. x

8 m/ O+ q+ l  u% U4 B3 v1 Z2 V& | this.loader = new TextureLoader()

const {headerMaterial,middleMaterial,bottomMaterial} = this.loadTexture ()
. J6 ]' _; J" {! J$ g3 u5 z



9 F7 s' j, S- Z' H  x7 E" zloadTexture () {
7 t- C( o$ e) x' m
; u+ d; e& M4 z( S' I. S& A. s        const headerTexture = this.loader.load('/game/res/images/head.png')
        const bottomTexture = this.loader.load('/game/res/images/bottom.png')
8 w! P% c9 k. F$ U        const middleTexture = this.loader.load('/game/res/images/middle.png')

3 w- d9 y7 z5 [6 Y
        const headerMaterial = new MeshBasicMaterial({
: s5 T; e5 x! ^            map: headerTexture
+ |9 b$ |7 B% G4 K        })
5 Q3 S: |9 A. I6 q- E        const middleMaterial = new MeshBasicMaterial({
) {+ c# y7 w6 K! s* u+ u# t* J7 b            map: middleTexture
        })
( h  @$ i* q/ q        const bottomMaterial = new MeshBasicMaterial({
            map: bottomTexture
8 H2 q0 n! y  W$ E7 O6 g6 ?- U        })
' Q" @9 b. X: N7 v
        return {headerMaterial,middleMaterial,bottomMaterial}
    }

5 z. I% K; `9 \! \
9 }- f3 {4 |4 n" |* f3 o; c: I' Y