webgl three 几何体

辅助几何体 

    // AxesHelper：辅助观察的坐标系
    const axesHelper = new THREE.AxesHelper(400);
    scene.add(axesHelper);
    //辅助观察网格
    const gridHelper = new THREE.GridHelper(300, 25, 0x004444, 0x004444);
    scene.add(gridHelper);

基础几何体

   //长方体
    const geometry1 = new THREE.BoxGeometry(100, 100, 100);
    //圆柱体
    const geometry2 = new THREE.CylinderGeometry(50, 50, 100);
    //球体
    const geometry3 = new THREE.SphereGeometry(100);
    //圆锥体
    //    radius： 圆锥体底部的半径；
    //height： 圆锥体的总高度；
    //radialSegments（径向分段数）： 圆锥体周围的圆环部分的分段数；
    //heightSegments（高度分段数）： 圆锥体的高度上的分段数；
    //openEnded（是否开口）： 一个布尔值，指示圆锥体是否是开口的，如果为 true，则表示开口；
    //thetaStart（起始角度）： 圆锥体的起始角度，用弧度表示；
    //thetaLength（角度范围）： 圆锥体的角度范围，用弧度表示。
    const geometry4 = new THREE.ConeGeometry(1, 10, 100, 200, Math.PI / 16, Math.PI/4);
    //矩形平面
    const geometry5 = new THREE.PlaneGeometry(100, 50);
    //圆平面
    const geometry6 = new THREE.CircleGeometry(50);

基础几何体添加材质及定位 

const mesh = new THREE.Mesh(geometry1, material1);
mesh.position.set(100, 100, 100);

自定义几何体

添加点

const geometry = new THREE.BufferGeometry();
    const vertices = new Float32Array([
        0, 0, 0, //顶点1坐标
        50, 0, 0, //顶点2坐标
        0, 100, 0, //顶点3坐标
        0, 0, 10, //顶点4坐标
        0, 0, 100, //顶点5坐标
        50, 0, 10, //顶点6坐标
        

    ]);
    const attribue = new THREE.BufferAttribute(vertices, 3);
    geometry.attributes.position = attribue;
    // 点渲染模式
    const material12 = new THREE.PointsMaterial({
        color: 0xff0000,
        size: 10.0 //点对象像素尺寸
    });
    //点模型对象 可以一次传入多个点 一次绘制
    const points = new THREE.Points(geometry, material12);

添加线

const geometry13 = new THREE.BufferGeometry();
    const vertices13 = new Float32Array([
        0, 0, 0, //顶点1坐标
        50, 0, 0, //顶点2坐标
        0, 100, 0, //顶点3坐标
        0, 0, 10, //顶点4坐标
        0, 0, 100, //顶点5坐标
        50, 0, 10, //顶点6坐标
    ]);
    const attribue13 = new THREE.BufferAttribute(vertices13, 3);
    geometry13.attributes.position = attribue13;
    // 线材质对象
    const material13 = new THREE.LineBasicMaterial({
        color: 0x000000//线条颜色
    });
    // 创建线模型对象
    const line = new THREE.Line(geometry13, material13);
    // 闭合线条
    const line2 = new THREE.LineLoop(geometry, material13);
    //非连续的线条
    const line3 = new THREE.LineSegments(geometry, material13);

添加面

所有几何体都是由三角形组成的 详细和webgl相同

在三角形中如果设置的坐标在模型上表现为逆时针 则为正面 顺时针 为反面

六点添加矩形

    const geometry11 = new THREE.BufferGeometry();
    const vertices1 = new Float32Array([
        0, 0, 0, //顶点1坐标
        80, 0, 0, //顶点2坐标
        80, 80, 0, //顶点3坐标
        0, 0, 0, //顶点4坐标   和顶点1位置相同
        80, 80, 0, //顶点5坐标  和顶点3位置相同
        0, 80, 0, //顶点6坐标
    ]);
    const attribue1 = new THREE.BufferAttribute(vertices1, 3);
    geometry11.attributes.position = attribue1;

    const material11 = new THREE.MeshStandardMaterial({ color: 0xff0000, side: THREE.DoubleSide});
    var mesh21 = new THREE.Mesh(geometry11, material11);
    scene.add(mesh21);

四点索引添加矩形

const geometry11 = new THREE.BufferGeometry();
    const vertices2 = new Float32Array([
        0, 0, 0, //顶点1坐标
        80, 0, 0, //顶点2坐标
        80, 80, 0, //顶点3坐标
        0, 80, 0, //顶点4坐标
    ]);
    const indexes = new Uint16Array([
        // 下面索引值对应顶点位置数据中的顶点坐标
        0, 1, 2, 0, 2, 3,
    ])
    const attribue1 = new THREE.BufferAttribute(vertices2, 3);
    geometry11.attributes.position = attribue1;
    geometry11.index = new THREE.BufferAttribute(indexes, 1); //1个为一组

    const material11 = new THREE.MeshBasicMaterial({
        color: 0xff0000,
        side: THREE.DoubleSide, //两面可见
    });
    const normals = new Float32Array([
        0, 0, 1, //顶点1法线( 法向量 )
        0, 0, 1, //顶点2法线
        0, 0, 1, //顶点3法线
        0, 0, 1, //顶点4法线
    ]);
    // 设置几何体的顶点法线属性.attributes.normal
    geometry11.attributes.normal = new THREE.BufferAttribute(normals, 3);
    var mesh21 = new THREE.Mesh(geometry11, material11);
    scene.add(mesh21);