使用ThreeJS添加纹理的方法

admin

8 n' b3 j* Y" p+ `! x( F  R. ~/ j使用TextureLoader的方法，添加图片进行load
. V2 v. P; ~- g5 B- h
* B) V7 r: D& x7 Y2 s! M2 j9 S结果如下：

  A) v. p3 d% q. A2 d& Z' r
+ |( a$ @* ^! q' o7 k) P6 q* W9 L+ v
this.loader = new TextureLoader()

const {headerMaterial,middleMaterial,bottomMaterial} = this.loadTexture ()
# E5 L$ Y9 U9 f" i
% B& l; N( U( P$ W% x. |3 R
  H+ U( [, r6 L# l5 ~. B/ v

loadTexture () {

+ z# V6 @# L$ B; r- n6 C2 K1 e3 b+ Z, ]        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')
  T0 x% x- p) d& D

( s$ s9 P. ], l) k# m' i        const headerMaterial = new MeshBasicMaterial({
            map: headerTexture
        })
        const middleMaterial = new MeshBasicMaterial({
5 m$ N% }2 u' R4 G: a            map: middleTexture
5 k; k3 ~& l9 w' C6 g$ q        })
        const bottomMaterial = new MeshBasicMaterial({
! m+ U8 L' P  n3 f; ]* u& F* E2 Y            map: bottomTexture
5 Q4 ?" t4 ^5 l. w! P$ h4 i        })
$ [3 \' Z6 A! T% ?' E8 J
        return {headerMaterial,middleMaterial,bottomMaterial}
2 c" a2 w# V# A: m, S; R8 I* i    }