使用ThreeJS添加纹理的方法

admin

使用TextureLoader的方法，添加图片进行load
" l8 W  R* }% e! C7 Y9 x/ G
结果如下：
* @$ B; B4 S. o8 {$ k5 G  m
. V4 y1 i: J& q4 l
& f! e: e. K. V' o7 |
this.loader = new TextureLoader()

const {headerMaterial,middleMaterial,bottomMaterial} = this.loadTexture ()

  _) B% r+ f. ]& U9 P/ e! i
; b/ H6 M2 |/ S( X9 g: I$ ~8 J
- |% i. p5 f3 H, K7 E% a. q4 L
loadTexture () {

        const headerTexture = this.loader.load('/game/res/images/head.png')
        const bottomTexture = this.loader.load('/game/res/images/bottom.png')
9 V7 o. x0 K: B8 ~+ Z2 x% A        const middleTexture = this.loader.load('/game/res/images/middle.png')


        const headerMaterial = new MeshBasicMaterial({
            map: headerTexture
        })
7 N- `+ w5 w8 B( e: v* V6 Y# n3 h        const middleMaterial = new MeshBasicMaterial({
7 o: A! h5 \7 e& K8 Y- y: k4 u% N) t            map: middleTexture
        })
        const bottomMaterial = new MeshBasicMaterial({
  x+ V: n: B& X* R0 i2 k/ R; v" n5 Q            map: bottomTexture
4 H5 C6 x( K, Q        })

+ i- i; @% U6 a2 F8 |6 _9 [! G        return {headerMaterial,middleMaterial,bottomMaterial}
1 @% R$ F9 c5 E! Q1 U    }

/ l5 k5 t9 N1 [3 u5 e  _
5 q' m$ `1 ~8 P/ g  t! h  C$ }' l