threejs-材质（textures）

what is textures?

 

 UV:

 

 UV coordinate 决定了 材质在mesh上贴 、铺的方式和位置

// add texture

// //第一种方式
// const image = new Image();
// const texture = new THREE.Texture(image)

// image.onload = () => {
//     texture.needsUpdate = true
//     //  通知texture 更新
// }
// image.src = './static/textures/door/color.jpg'

let texture  = new THREE.TextureLoader(LoadingManager)
// 第二种方式
//可以在TextureLoader中传入loadingmanager
const colorTexture2 = texture.load('/static/textures/door/color.jpg',
    // () => {
    //     console.log('load')
    // },
    // () => {
    //     console.log('load progress')
    // },
    // () => {
    //     console.log('load error')
    // }
    // 可以有三个回调函数
)
const alphaTexture = texture.load('/static/textures/door/alpha.jpg')
const heightTexture = texture.load('/static/textures/door/height.jpg')
const normalTexture = texture.load('/static/textures/door/normal.jpg')
const ambientOcclusionTexture = texture.load('/static/textures/door/ambientOcclusion.jpg')
const metalnessTexture = texture.load('/stati c/textures/door/metalness.jpg')
const roughnessTexture = texture.load('/static/textures/door/roughness.jpg')
  
/*  edit texture (transforming texture) 例如css中的背景重复(repeat)  */
// colorTexture2.repeat.x = 2
// colorTexture2.repeat.y = 3
//wrapS  x 方向是重复， wrapT  y方向上重复(RepeatWrapping)  MirroredRepeatWrapping(镜像反转后重复！！)
// colorTexture2.wrapS = THREE.MirroredRepeatWrapping
// colorTexture2.wrapT = THREE.RepeatWrapping
// //texture 偏移
// colorTexture2.offset.x = 0.5
// colorTexture2.offset.y = 0.5
// texture rotation
colorTexture2.rotation = Math.PI * 0.25
colorTexture2.center.x = 0.5
colorTexture2.center.y = 0.5


// filtering and mip mapping 
// colorTexture2.minFilter = THREE.NearestFilter 
// 如果设置了colorTexture2.minFilter = THREE.NearestFilter 
// ，可以设置 colorTexture2.generateMipmaps = false 获得好的性能
// 如果一张分辨率很小的贴图，会出现模糊 blurry。 设置magFilter = THREE.NearestFilter， 就会清晰很多
colorTexture2.magFilter = THREE.NearestFilter

// texture format and optimisation(最优化)
// 贴图 texture 图片的体积越小越有利于gpu处理
// 贴图尺寸 width*height 最好是 2的指数倍。 比如 128 256 512 1024 2048... 也就是 512*512 512*2048这种尺寸的更利于gpu处理！

/*  texture  support transparency but we can't have transparency in .jpg，if we want to have
 only one texture that combine color and alpha, we better use .png file
 lf we are using a normal texture we want to have the exact values which is 
 why we shouldn't apply lossy compression and we better use .png for those



 */