Preliminary three.js Geometry

Three.js today to talk about geometry, common geometry will not say today, today to talk about how to draw lines, arcs, lines, and advanced geometry.

1. Draw a straight line

We draw a straight line using THREE.Geometry () object.

// to add blank geometry point information, geometry of these points will automatically combined into line. 
var Material's = new new THREE.LineBasicMaterial ({Color: 0x00ff00 });
 var Geometry = new new THREE.Geometry (); 
geometry.vertices.push ( new new THREE.Vector3 (0,0,0 )); 
geometry.vertices.push ( new new THREE.Vector3 (10,10,10 )); 
geometry.vertices.push ( new new THREE.Vector3 (0,20,0 ));
 var Line = new new THREE.Line (Geometry, Material's);

This will draw a polyline in space.

2. Draw an arc line

We draw a circle arc by means of THREE.ArcCurve () object. This object d3.js somewhat similar to the layout (layout), its essence is to generate a series of point coordinates based on the parameters, he has some methods .getPoints () to obtain a uniform upper arc point coordinates from the arc line. The following is THREE.ArcCurve () part of the source code.

THREE.ArcCurve = function (ax, ay, Arad, aStartAngle, aEndAngle, aClockwise) { 

    THREE.EllipseCurve.call ( this , ax, ay, Arad, Arad, aStartAngle, aEndAngle, aClockwise); 

};

We know there are six parameters, and inherited from THREE.EllipseCurve (). Plus we have to draw down the arc.

var arc = new THREE.ArcCurve(0, 0, 30, 0, Math.PI * 2, true);
var points = arc.getPoints(1000);
var ring = new THREE.Geometry();
points.forEach(v => ring.vertices.push(new THREE.Vector3(v.x,0,v.y)));
var mat = new THREE.LineBasicMaterial({color: 0x999900});
var line = new THREE.LineLoop(ring, mat);

Note that points are a point above the XY plane. The last line used to draw an arc THREE.LineLoop.

3. Use ConvexGeometry () the convex hull

What is the convex hull? Simply put convex hull is, in space is not a straight line of three points each are composed of a plane, if there is a set of points in space, it will make up a lot of plane, if the plane opaque, we can only see the outermost a plurality of faces, the face body is composed of several convex hull.

like this! (This just added a rock textures)

It is very simple convex hull

let asteroidMate = new THREE.MeshBasicMaterial();
let points = [];
let rad = Math.pow(Math.random(), 3) * ASTERIODRADIUS;
for(var j=0; j<30; j++) {
    points.push(new THREE.Vector3(Math.random() * 10, Math.random() * 10, Math.random() * 10))
}
var asteroidGeom = new THREE.ConvexGeometry(points);

var asterMesh = new THREE.Mesh(asteroidGeom, asteroidMate);

This is composed of random convex points 30 of the package. You can try to use it to customize the graphics or make a random pattern.

4. LatheGeometry () rotator

The rotary body is fixed shaft geometry wound by the rotation of a set of dots formed, LatheGeometry has four parameters, the first group of points are points, the second is the number of segments, the third rotation start angle, a fourth a rotation angle.

ar points = [];
for(var i=-12; i<=10; i = i + 0.5) {
    if(i < 0) {
        console.log(Math.sqrt(36 - Math.pow(i + 6, 2)) * 1.2, i)
        points.push(new THREE.Vector3(Math.sqrt(36 - Math.pow(i + 6, 2)) * 1.2, i))
    } else if(i < 8 && i >= 0) {
        console.log(Math.sqrt(16 - Math.pow(i - 4, 2)) * 1.2, i)
        points.push(new THREE.Vector3(Math.sqrt(16 - Math.pow(i - 4, 2)) * 1.2, i))
    } else {
        console.log(Math.sqrt(1 - Math.pow(i - 9, 2)) * 1.2, i)
        points.push(new THREE.Vector3(Math.sqrt(1 - Math.pow(i - 9, 2)) * 1.2, i))
    }
}
var latheGeo = new THREE.LatheGeometry(points, 30, 0, Math.PI * 2);
latheMesh = createMesh(latheGeo);;

5. ExtrudeGeometry()拉伸几何体

拉伸几何体就是将一个几何体沿着Z轴拉伸形成的几何体。它的参数比较多但是不难理解。

var material = new THREE.MeshNormalMaterial();
var shapeGeomery = new THREE.Shape();
shape.moveTo(-10, -10);
shape.lineTo(10, -10);
shape.lineTo(10, 10);
shape.lineTo(-10,10);
shape.lineTo(-10, -10);
var geometry = new THREE.ExtrudeGeometry(shapeGeomery, {
    amount: 2, //拉伸的深度
    bevelThickness: 2,  //斜角的深度
    bevelSize: 3,  //斜角的高度
    bevelSegments: 30,  //斜角分段数
    bevelEnabled: true, //开启斜角
    curveSegments: 12,  //拉伸的段数
    steps: 1  //沿深度方向的段数
})
var shape = new THREE.Mesh(geometry, material);

这里注意几点，
1.ExtrudeGeometry()的第一个参数是一个shape对象，
2.区分一下这三个分段数，bevelSegments是斜角的分段，它影响斜角的光滑程度，curveSegments是拉伸曲线的段数，steps是沿深度方向的段数。

6.TubeGeometry()沿曲线拉伸

这个方法很简单，就是验证曲线拉伸成一根管，简单的东西直接上代码

var points = [];
for (var i = 0; i < controls.numberOfPoints; i++) {
    var randomX = -20 + Math.round(Math.random() * 50);
    var randomY = -15 + Math.round(Math.random() * 40);
    var randomZ = -20 + Math.round(Math.random() * 40);

    points.push(new THREE.Vector3(randomX, randomY, randomZ));
}
var tubeGeometry = new THREE.TubeGeometry(new THREE.SplineCurve3(points), 64, 3, 16, false);
var meshMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00, transparent: true, opacity: 0.2});
var tubeMesh = new THREE.Mesh(tubeGeometry, meshMaterial)

这里只需注意TubeGeometry()的第一个参数是一个SplineCurve3对象，需要将三维点数组用SplineCurve3处理成三维曲线。

7.ParametricGeometry()基于等式的几何体

这个东西类似于高数中的参数方程，通过三阶等式来创建空间曲面,使用ParametricGeometry()的时候，我特意使用了v69版本和v104两个版本，使用方法是不同的。下面我们从代码中寻找区别。

// v69
var oldVersion = function (u, v) {
    var x = u * 50 - 25;
    var z = v * 50 - 25;
    var y = Math.sin(u * 50 - 25) + Math.sin(v * 50 - 25) +  Math.pow((Math.pow((u - 0.5), 2) + Math.pow((v - 0.5), 2)) * 10, 2) - 10;
    return new THREE.Vector3(x, y, z);
};
var geometry = new THREE.ParametricGeometry(oldVersion, 120, 120)

var newVersion = function (u, v, target) {
    var x = u * 50 - 25;
    var z = v * 50 - 25;
    var y = Math.sin(u * 50 - 25) + Math.sin(v * 50 - 25) +  Math.pow((Math.pow((u - 0.5), 2) + Math.pow((v - 0.5), 2)) * 10, 2) - 10;
    target.set(x,y,z);
};
var geometry = new THREE.ParametricGeometry(newVersion, 120, 120)

可以看出方法中传递了第三个参数，这里使用set方法做了优化，（所以说每当出现新的js标准后，都出新生一些框架或者出现新版本）。相信喜欢数学的小伙伴都会非常喜欢这个几何体。下面随便展示一个demo

### 8. 组合网格
未完待续。。。（这将是一个非常有意思的几何体）
### 9. Geometry()实现自定义面
未完待续。。。（同样可以很发散）

 

更多demo请移步至原文

转载请注明原文地址 http://www.bettersmile.cn 郭志强的博客