使用ThreeJS添加纹理的方法

admin

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

结果如下：


# I8 X1 C1 h3 `: f8 P5 v0 m$ L
& ?( @2 j9 I# F; E% K! q) o this.loader = new TextureLoader()

const {headerMaterial,middleMaterial,bottomMaterial} = this.loadTexture ()


+ h' j' E) E) @. r9 w! @2 [+ o  y

$ k6 @9 J8 e3 s( `; uloadTexture () {
( t5 i, ]+ y) Y  x" z
0 ]6 ?% v" Z( `        const headerTexture = this.loader.load('/game/res/images/head.png')
/ X* z  g1 S4 X" z& r) \# [        const bottomTexture = this.loader.load('/game/res/images/bottom.png')
2 w; ~  h' T. X& e8 z1 m. Y        const middleTexture = this.loader.load('/game/res/images/middle.png')


        const headerMaterial = new MeshBasicMaterial({
            map: headerTexture
/ z- l. H' O$ E; Q" ~$ n6 H$ B% ^        })
        const middleMaterial = new MeshBasicMaterial({
2 Q* k8 p  q7 p' ?            map: middleTexture
% P, v# q5 ]$ W2 y        })
/ ~3 Q) W, p! H1 A6 y        const bottomMaterial = new MeshBasicMaterial({
; C: F( L6 _# L* n: r            map: bottomTexture
1 z) m9 ?& b4 X' n% H( R        })
6 m) \5 x) q! R  A' L
6 w$ E" [6 n# E/ P2 f$ M" w  B0 B6 X        return {headerMaterial,middleMaterial,bottomMaterial}
    }