辅助几何体 

    // 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.normalgeometry11.attributes.normal = new THREE.BufferAttribute(normals, 3);var mesh21 = new THREE.Mesh(geometry11, material11);scene.add(mesh21);