threejs 圆形平面 CircleGeometry设置纹理贴图 学习笔记

js yekong

threejs 圆形平面 CircleGeometry设置纹理贴图 学习笔记

通过圆形几何体CircleGeometry创建一个网格模型Mesh,把一张图片作为圆形Mesh材质的颜色贴图,这样就可以把一张方形图片剪裁這染为圆形效果。

CireleGeometry 的UV坐标会对颜色纹理贴图map进行提取,CircleGeometry的UV 坐标默认提取的就是一个圆形轮廓。

var geometry = new THREE.CircleGeometry(30, 100);
const loadTex = new THREE.TextureLoader();
const texture = loadTex.load('./img.png')
const material = new THREE.MeshLambertMaterial({
    map: texture  //设管材质的颜色贴图:把图片作为mesh材质的贴图
})
const mesh = new THREE.Mesh(geometry, material)
export default mesh

喜欢