Surface plan incurvée dans CSS3 ou Three.js?

Question

Comment créer une surface plane incurvée (comme celle illustrée) en utilisant CSS3 ou Three.js?

Answer 1

var width = 100, height = 100, width_segments =1, height_segments = 100; 
var plane = new THREE.PlaneGeometry(width, height, width_segments, height_segments); 

for(var i=0; i<plane.vertices.length/2; i++) { 
    plane.vertices[2*i].position.z = Math.pow(2, i/20); 
    plane.vertices[2*i+1].position.z = Math.pow(2, i/20); 
} 

var mesh = new THREE.Mesh(plane, new THREE.MeshLambertMaterial({color: 0x888888})); 
mesh.doubleSided = true; 
mesh.rotation.y = Math.PI/2-0.5; 
scene.add(mesh); 

Vous créez la géométrie, et le déplacer est sommets comme vous le souhaitez. Pour créer une surface courbe, vous pouvez utiliser les fonctions 'sin' ou 'cos', ou exponentielles, comme je l'ai montré. J'espère que cela aide.