How to warp image by grid

Questions
,
1

I want to warp the image by 6 knots, i found a online tools https://mockover.com/editor/ can do that,the tool use THREE too, so i want to konw how to do that

未标题-1
未标题-11200×800 106 KB

2 
let geometry = new THREE.PlaneGeometry(1,2,1,2);
let mesh= new THREE.Mesh(geometry,new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load("Your image.jpg")}))

let sphr = new THREE.Mesh(new THREE.SphereGeometry(.1),new THREE.MeshBasicMaterial({color:'red'}));

let p = geometry.attributes.position;
for(let i=0;i<p.count;i++){
    let x = p.getX(i)
    let y = p.getY(i)
    let z = p.getZ(i)
    if(y>0)x += .5;
    let sp = sphr.clone();
    sp.position.set(x,y,z);
    scene.add(sp);
    p.setX(i,x)
    p.setY(i,y)
    p.setZ(i,z)
}
scene.add(mesh);
2 Likes
3

Sincerely thank you, you have provided me with great help :heart_eyes: :heart_eyes:

1 Like