使用ThreeJS添加纹理的方法

admin

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

结果如下：

$ l. I7 n1 G* H" I; }

% `- R* C2 w# g& e. O+ E this.loader = new TextureLoader()
: t6 x$ Q$ N7 ]7 G6 J
0 |6 p1 y6 O: h8 J1 @0 L+ Y; uconst {headerMaterial,middleMaterial,bottomMaterial} = this.loadTexture ()
; G$ f+ l( [* H  i9 f2 e



- ]4 V, d' a0 C9 O4 _7 }loadTexture () {
1 d6 H. _( N% U
        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')

, A$ d# Q/ F6 q, h$ ?8 }7 |
6 \7 q" `7 n8 F4 _4 E0 ?) o        const headerMaterial = new MeshBasicMaterial({
% v) J, f3 K7 u$ @* F0 z            map: headerTexture
9 q5 Z5 k. |* |- s        })
8 V% B5 V# m- p" D, |$ p7 |        const middleMaterial = new MeshBasicMaterial({
) E/ `1 o: M% C5 w1 l7 Y( N5 p            map: middleTexture
$ H, m  F* ]8 P" S- Y        })
5 d- H" H3 g! m: O        const bottomMaterial = new MeshBasicMaterial({
) O( |9 i; M) V2 g, F. a% |            map: bottomTexture
2 a6 ]/ k3 C: f- l        })

        return {headerMaterial,middleMaterial,bottomMaterial}
    }

/ h4 |  K. V% D+ n6 }
+ S2 t9 v7 `% a) m