Graphics Reference
In-Depth Information
1. The first thing we need to do is create the function that will create the geo-
metry for us. This function will take two arguments:
u
and
v
. When Three.js
uses this function to generate a geometry, it will call this function with
u
and
v
values, starting at
0
and ending at
1
. For each of these
u
and
v
combina-
tions, this function should return a
THREE.Vector3
object, which represents
a single vertex in the final geometry. The function that creates the figure you
saw in the previous section is shown next:
var paramFunction = function(u, v) {
var a = 3;
var n = 3;
var m = 1;
var u = u * 4 * Math.PI;
var v = v * 2 * Math.PI;
var x = (a + Math.cos(n * u / 2.0) *
Math.sin(v) - Math.sin(n * u / 2.0) *
Math.sin(2 * v)) * Math.cos(m * u / 2.0);
var y = (a + Math.cos(n * u / 2.0) *
Math.sin(v) - Math.sin(n * u / 2.0) *
Math.sin(2 * v)) * Math.sin(m * u / 2.0);
var z = Math.sin(n * u / 2.0) *
Math.sin(v) + Math.cos(n * u / 2.0) *
Math.sin(2 * v);
return new THREE.Vector3(x, y, z);
}
You can provide functions of your own as long as you return a new
THREE.Vector3
object for each value of
u
and
v
.
2. Now that we've got the function that creates our geometry, we can use this
function to create
THREE.ParametricGeometry
:
var geom = new
THREE.ParametricGeometry(paramFunction,
100, 100);
var mat = new THREE.MeshPhongMaterial({
color: 0xcc3333a,
side: THREE.DoubleSide,
