Curved Plane Surface in CSS3 or Three.Js

Curved plane surface in CSS3 or Three.js?

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);

You create geometry, and displace it's vertices the way you would like to. For creating curved surface you could use 'sin' or 'cos' functions, or exponential, as I showed.
Hope this helps.

how to make a curved plane in threejs

You probably should try to look for the right equation but, by the time being, you should be able to get something working with something like this:

new THREE.SphereGeometry(75, 16, 8, 0, 2, 1, 1.2);

http://jsfiddle.net/EHEap/

Draw curved line in three.js from vector3 to vector3 on surface of SphereGeometry

I hope I don't re-invent a bicycle. The answer based on this SO answer

Imagine that your two vectors and the sphere's center are vertices of a triangle.

When we have a triangle, we can find it's normal. That normal will be our axis and we'll simply rotate our first vector around it.

function setArc3D(pointStart, pointEnd, smoothness, color, clockWise) {
  // calculate a normal ( taken from Geometry().computeFaceNormals() )
  var cb = new THREE.Vector3(), ab = new THREE.Vector3(), normal = new THREE.Vector3();
  cb.subVectors(new THREE.Vector3(), pointEnd);
  ab.subVectors(pointStart, pointEnd);
  cb.cross(ab);
  normal.copy(cb).normalize();

  var angle = pointStart.angleTo(pointEnd); // get the angle between vectors
  if (clockWise) angle = angle - Math.PI * 2;  // if clockWise is true, then we'll go the longest path
  var angleDelta = angle / (smoothness - 1); // increment

  var geometry = new THREE.Geometry();
  for (var i = 0; i < smoothness; i++) {
    geometry.vertices.push(pointStart.clone().applyAxisAngle(normal, angleDelta * i))  // this is the key operation
  }

  var arc = new THREE.Line(geometry, new THREE.LineBasicMaterial({
    color: color
  }));
  return arc;
}

jsfiddle example.

---

Related Topics