使用ThreeJS添加纹理的方法

admin

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

, ^7 i- N" b# R+ q0 z# F/ c3 u- e结果如下：


4 P5 [" ^. D8 k$ ?; C" Z
this.loader = new TextureLoader()
9 U( }. D# _- Q; i+ d; S! P0 O7 F
% Z6 U2 }) t2 k) }- @) w, Tconst {headerMaterial,middleMaterial,bottomMaterial} = this.loadTexture ()

( ?( o6 m) K8 A& d0 R6 ^" m
& I3 V, b: r  H) ?; G* q% G
2 F) z+ ]8 V6 `8 Z
" c' C0 ^% T6 p8 M/ IloadTexture () {
' D) H. q( }8 H) ]6 W, V6 R
        const headerTexture = this.loader.load('/game/res/images/head.png')
        const bottomTexture = this.loader.load('/game/res/images/bottom.png')
        const middleTexture = this.loader.load('/game/res/images/middle.png')


' D9 n+ C5 Z: h6 ~        const headerMaterial = new MeshBasicMaterial({
            map: headerTexture
        })
        const middleMaterial = new MeshBasicMaterial({
' W) O  I# T: ^+ G            map: middleTexture
7 t3 D  \- c1 ]9 O6 n3 I        })
( Y* Z2 S7 x' f/ y. L# B        const bottomMaterial = new MeshBasicMaterial({
            map: bottomTexture
; O) ^( A. Q5 z8 R7 q0 A/ V- h        })
5 |* v, U1 }1 r( T8 m# F- v
! B+ u- r. r9 J+ _, k0 Y        return {headerMaterial,middleMaterial,bottomMaterial}
# z. z' S! {- I; H  Q. t8 t    }
; [4 R$ }2 D' A9 b, B

4 M! Z0 Z/ a/ N