使用ThreeJS添加纹理的方法

admin

使用TextureLoader的方法，添加图片进行load
$ i7 J+ D# J0 }) o/ B( r" d4 d
* j2 R. J, ^- r) ^& [结果如下：


% h2 V6 U; I! ~6 {
6 m7 q0 ^! R4 B this.loader = new TextureLoader()
$ |- b% }( [% ]" ]' b$ p3 L8 I
/ k+ @0 r/ O1 H$ z7 [. w2 Iconst {headerMaterial,middleMaterial,bottomMaterial} = this.loadTexture ()
! B  l0 k& Q8 {$ w2 a  a) z
1 s- Q5 m4 C: q


loadTexture () {

2 T, b7 F0 d# L% j( p9 u        const headerTexture = this.loader.load('/game/res/images/head.png')
        const bottomTexture = this.loader.load('/game/res/images/bottom.png')
" v& O+ _) e& h' C        const middleTexture = this.loader.load('/game/res/images/middle.png')
1 h0 _( w! Y) |) h( O6 H+ J0 M

; Y) a8 h3 n. _- b$ r# ?        const headerMaterial = new MeshBasicMaterial({
            map: headerTexture
8 c, X, x" B; ^6 F0 v# b) }9 j        })
        const middleMaterial = new MeshBasicMaterial({
            map: middleTexture
4 s2 X4 N6 A! f* D$ j0 N        })
7 n5 U/ j* M0 p- Z+ r$ c  @. O        const bottomMaterial = new MeshBasicMaterial({
            map: bottomTexture
8 ]: A# M9 f$ [7 j/ W        })

        return {headerMaterial,middleMaterial,bottomMaterial}
+ z6 c5 o. R% D* B    }
4 V, u. j& I8 K6 N( L4 g
: M: P- I- W9 K% M5 M4 A, s4 B