使用ThreeJS添加纹理的方法

admin

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

结果如下：



this.loader = new TextureLoader()
# h2 {4 }2 l2 L& M
. w4 S, ~. i3 f1 k  Nconst {headerMaterial,middleMaterial,bottomMaterial} = this.loadTexture ()
; H8 K+ ?0 e# G$ e& L, q
1 V, D- x5 e/ Q/ b1 m, a1 e1 _
' [' d: T% C3 o* P* S2 R
; Q6 m. @$ Q3 a5 A5 P& }7 m$ t" F, _
loadTexture () {

        const headerTexture = this.loader.load('/game/res/images/head.png')
; d' u6 `2 t, g9 J        const bottomTexture = this.loader.load('/game/res/images/bottom.png')
- {$ D3 J- z; |/ `6 f. F! H7 z        const middleTexture = this.loader.load('/game/res/images/middle.png')
2 _7 J1 R" `5 j; [
& m8 p, y  a) h8 ]( n
6 J- c( G( u8 C% q        const headerMaterial = new MeshBasicMaterial({
            map: headerTexture
2 H* J$ Q% _: d6 ]: h! W  o; l  L        })
) P  F4 X9 M) T        const middleMaterial = new MeshBasicMaterial({
7 @; ?$ F# i8 u4 S9 v' n            map: middleTexture
6 V* V0 `- L  W- b2 q        })
8 r- G' N6 G" S' Y! ^6 s( p; m        const bottomMaterial = new MeshBasicMaterial({
            map: bottomTexture
        })
& z; V- E; t* X# D
" f/ D# D3 ?4 t% Q/ V$ `: J4 Q        return {headerMaterial,middleMaterial,bottomMaterial}
    }
: ^  t2 p5 w. U. c# y
. h4 k- y; h" J9 K! d