http://cur.lv/4x9e0 (Earn BTC) /** * Transform a THREE.CSS3DObject object so that it aligns to a given rectangle. * * @param object: A THREE.CSS3DObject object. * @param v: A list of the 4 vertices of the rectangle (clockwise order) on which to align the object. */ function alignObject(object, v) { // width of DOM object wrapped via CSS3DObject var width = parseInt(object.element.style.width, 10); // compute rect vectors from rect vertices var v10 = v[1].clone().sub(v[0]); var v30 = v[3].clone().sub(v[0]); // compute (uniform) scaling var scale = v10.length() / width; // compute translation / new mid-point var position = new THREE.Vector3().addVectors(v10, v30).multiplyScalar(0.5).add(v[0]); // compute rotations var rotX = -v30.angleTo(new THREE.Vector3(0, -1, 0)); // FIXME: rotY, rotZ // apply transformation object.scale.set(scale, scale, scale); object.position = position; object.rotateX(rotX); }