使用ThreeJS添加纹理的方法

admin

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

结果如下：



this.loader = new TextureLoader()
; L( s* E/ T' l% d8 w
const {headerMaterial,middleMaterial,bottomMaterial} = this.loadTexture ()
$ j2 _' N9 S, [5 R


: [2 S- Y: Y. k
, t5 q5 y4 t8 Z! {0 }# aloadTexture () {

        const headerTexture = this.loader.load('/game/res/images/head.png')
        const bottomTexture = this.loader.load('/game/res/images/bottom.png')
7 O! a' e6 J$ I& |$ {        const middleTexture = this.loader.load('/game/res/images/middle.png')
& c2 e9 b9 v- Z; y) |% l

        const headerMaterial = new MeshBasicMaterial({
! m5 |# \% j6 A, p$ b3 @, k            map: headerTexture
  E7 x, T; M/ K* q" E% w: J# B        })
        const middleMaterial = new MeshBasicMaterial({
7 K$ p; v1 p. R( Y9 I# Z5 k. T9 V            map: middleTexture
        })
        const bottomMaterial = new MeshBasicMaterial({
            map: bottomTexture
        })

        return {headerMaterial,middleMaterial,bottomMaterial}
4 w. m0 i. @5 u    }
3 Z2 f! Y6 x( t7 Q" ^' }# C
' j+ M$ N/ T) `' \
9 Y' G& f. w7 B* b$ j, Z$ y