使用ThreeJS添加纹理的方法

admin

4 x* s* H& w4 G! N" k使用TextureLoader的方法，添加图片进行load

7 \$ ~2 U- i  h结果如下：

- R2 g; d! }7 b. l9 H2 R+ `* B
0 I& E- `8 D$ W- P+ s6 Y3 J4 d
5 o1 ]3 w+ R, Y+ h: |1 ]& I3 |8 N this.loader = new TextureLoader()

const {headerMaterial,middleMaterial,bottomMaterial} = this.loadTexture ()
7 e9 b0 C6 ]0 F5 U) L) n
/ f$ A. Z2 ^, }' ~8 w


loadTexture () {

- G8 o. {2 p$ U5 ]3 I; r        const headerTexture = this.loader.load('/game/res/images/head.png')
( }- v  J* [2 g# p1 A1 V        const bottomTexture = this.loader.load('/game/res/images/bottom.png')
        const middleTexture = this.loader.load('/game/res/images/middle.png')

5 G3 g0 Y6 R1 W) Y7 P
7 Z3 j- E4 j4 R+ s2 }( q4 A        const headerMaterial = new MeshBasicMaterial({
            map: headerTexture
: n+ v; [0 I0 M$ w4 X! \        })
        const middleMaterial = new MeshBasicMaterial({
            map: middleTexture
        })
) L; f  _: O9 n9 B# m. q) t        const bottomMaterial = new MeshBasicMaterial({
4 t  o3 J% F9 I( e            map: bottomTexture
$ A/ W. u' S' E3 `! J) n7 I        })
* {: W  |; }. J8 {
$ o! a- B$ a  J9 f. f& A; U1 o1 @        return {headerMaterial,middleMaterial,bottomMaterial}
6 I; O  X8 C; p    }

; k% s6 S! M5 O; [' R$ [$ d