深入浅出 three.js (六)

/ uncle.wang

threejs的内置几何对象

相比直接 new 出 Geometry , 然后再手动一个个 push 顶点 push面的做法, 使用 threejs 内置的几何体会更加方便. 这些几何体基本上可以涵盖我们见到的大多数物体, 即便不能,通过组合,也可以得到相近的.

下面我们一个个来说说.

1.BoxGeometry:

盒状几何体,通过控制 Segments 的值,可以将一个大平面分割成很多小平面.

  • 构造函数: BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)
    • width — Width of the sides on the X axis.
    • height — Height of the sides on the Y axis.
    • depth — Depth of the sides on the Z axis.
    • widthSegments — Optional. Number of segmented faces along the width of the sides. Default is 1.
    • heightSegments — Optional. Number of segmented faces along the height of the sides. Default is 1.
    • depthSegments — Optional. Number of segmented faces along the depth of the sides. Default is 1.

实例:

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

2.CircleGeometry:

圆形几何体.

  • 构造函数: CircleGeometry(radius, segments, thetaStart, thetaLength)
    • radius — Radius of the circle, default = 50.
    • segments — Number of segments (triangles), minimum = 3, default = 8.
    • thetaStart — Start angle for first segment, default = 0 (three o'clock position).
    • thetaLength — The central angle, often called theta, of the circular sector. The default is 2*Pi, which makes for a complete circle.

实例:

var geometry = new THREE.CircleGeometry( 5, 32 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var circle = new THREE.Mesh( geometry, material );
scene.add( circle );

3.ConeGeometry:

圆锥形几何体.

  • 构造函数: ConeGeometry(radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength)
    • radius — Radius of the cone at the base. Default is 20.
    • height — Height of the cone. Default is 100.
    • radiusSegments — Number of segmented faces around the circumference of the cone. Default is 8
    • heightSegments — Number of rows of faces along the height of the cone. Default is 1.
    • openEnded — A Boolean indicating whether the base of the cone is open or capped. Default is false, meaning capped.
    • thetaStart — Start angle for first segment, default = 0 (three o'clock position).
    • thetaLength — The central angle, often called theta, of the circular sector. The default is 2*Pi, which makes for a complete cone.

实例:

var geometry = new THREE.ConeGeometry( 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cone = new THREE.Mesh( geometry, material );
scene.add( cone );

4.CylinderGeometry:

圆筒几何体.

  • 构造函数: CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded, thetaStart, thetaLength)
    • radiusTop — Radius of the cylinder at the top. Default is 20.
    • radiusBottom — Radius of the cylinder at the bottom. Default is 20.
    • height — Height of the cylinder. Default is 100.
    • radiusSegments — Number of segmented faces around the circumference of the cylinder. Default is 8
    • heightSegments — Number of rows of faces along the height of the cylinder. Default is 1.
    • openEnded — A Boolean indicating whether the ends of the cylinder are open or capped. Default is false, meaning capped.
    • thetaStart — Start angle for first segment, default = 0 (three o'clock position).
    • thetaLength — The central angle, often called theta, of the circular sector. The default is 2*Pi, which makes for a complete cylinder.

实例:

var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );

5.PlaneGeometry:

平面几何体. 常被用于当做陆地.

  • 构造函数: PlaneGeometry(width, height, widthSegments, heightSegments)
    • width — Width along the X axis.
    • height — Height along the Y axis.
    • widthSegments — Optional. Default is 1.
    • heightSegments — Optional. Default is 1.

实例:

var geometry = new THREE.PlaneGeometry( 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
var plane = new THREE.Mesh( geometry, material );
scene.add( plane );

6.SphereGeometry:

球形几何体.

  • 构造函数: SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
    • radius — sphere radius. Default is 50.
    • widthSegments — number of horizontal segments. Minimum value is 3, and the default is 8.
    • heightSegments — number of vertical segments. Minimum value is 2, and the default is 6.
    • phiStart — specify horizontal starting angle. Default is 0.
    • phiLength — specify horizontal sweep angle size. Default is Math.PI * 2.
    • thetaStart — specify vertical starting angle. Default is 0.
    • thetaLength — specify vertical sweep angle size. Default is Math.PI.

实例:

var geometry = new THREE.SphereGeometry( 5, 32, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

7.TorusGeometry:

空心环几何体.

  • 构造函数: TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)
    • radius — Default is 100.
    • tube — Diameter of the tube. Default is 40.
    • radialSegments — Default is 8
    • tubularSegments — Default is 6.
    • arc — Central angle. Default is Math.PI * 2.

实例:

var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var torus = new THREE.Mesh( geometry, material );
scene.add( torus );

8.TextGeometry:

3D文字几何体. threejs 只提供了一部分3D字体模型. 汉字什么的就别想了....

目前支持的字体有 helvetiker , optimer , gentilis , droid sans , droid serif 每种都包含normal正常体和 bold 粗体.

  • 构造函数: TextGeometry(text, parameters)
    • font — THREE.Font.
    • size — Float. Size of the text.
    • height — Float. Thickness to extrude text. Default is 50.
    • curveSegments — Integer. Number of points on the curves. Default is 12.
    • bevelEnabled — Boolean. Turn on bevel. Default is False.
    • bevelThickness — Float. How deep into text bevel goes. Default is 10.
    • bevelSize — Float. How far from text outline is bevel. Default is 8.

实例:

var loader = new THREE.FontLoader();
loader.load('asset/helvetiker_regular.typeface.json', function (response) {

    font = response;

    var options = {
        size: 90,
        height: 90,

        font: font,
        bevelThickness: 2,
        bevelSize: 4,
        bevelSegments: 3,
        bevelEnabled: true,
        curveSegments: 12,
        steps: 1
    };

    var textGeometry = new THREE.TextGeometry("TextGeometry", options);
    var material = new THREE.MeshPhongMaterial({ "color": 0xffff00 });
    material.side = THREE.DoubleSide;
    var sphere = new THREE.Mesh(textGeometry, material);
    sphere.position.set(200, 0, 50);
    scene.add(sphere);

});
留言：

称呼：*

邮件：

网站：

内容：