使用ThreeJS添加纹理的方法

admin

7 g- x9 X) L. G. Z( t3 N( E使用TextureLoader的方法，添加图片进行load
' t4 t$ {$ ?1 r, P0 J$ R* b; n
结果如下：


" k2 b- x$ y6 t% E' [* p
this.loader = new TextureLoader()
, m. v/ U$ t' s  c+ L+ j6 H7 t' `
const {headerMaterial,middleMaterial,bottomMaterial} = this.loadTexture ()
3 G$ h9 q# o  H& ?  D# @
4 T' D0 A7 S; Q6 u9 h


loadTexture () {
, v3 O1 G5 S8 h& v
        const headerTexture = this.loader.load('/game/res/images/head.png')
0 ?. C9 [2 D+ n" q4 u7 l        const bottomTexture = this.loader.load('/game/res/images/bottom.png')
4 X+ ?& x& H1 [' ^        const middleTexture = this.loader.load('/game/res/images/middle.png')


8 H( S) M# d4 K8 ?- ]: T2 `# |        const headerMaterial = new MeshBasicMaterial({
& q* y3 X" g& \- E. d& J) Z) t            map: headerTexture
0 |: @2 k+ n2 {        })
        const middleMaterial = new MeshBasicMaterial({
" d' H0 ]  g" }1 Q# I. L* `; P            map: middleTexture
9 p' H& X1 |3 g+ w) p. b& x$ p; b        })
: i8 U' L2 {8 P# S        const bottomMaterial = new MeshBasicMaterial({
" H- D" D1 c. V/ @! _! P            map: bottomTexture
- j6 W, u5 F8 V        })

        return {headerMaterial,middleMaterial,bottomMaterial}
: T7 z5 [5 w, n& I. y% y    }

0 e, D. J% l" u/ b1 R