先上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
overflow: hidden;
}
#geometry {
width: 1000px;
height: 1000px;
}
</style>
<!--引入three.js三维引擎-->
<script src="./three.min.js"></script>
<!--鼠标操作三维场景的控件-->
<script src="./OrbitControls.js"></script>
</head>
<body>
<div id="geometry"></div>
<script>
/**
* 创建场景对象
*/
var scene = new THREE.Scene();
/**
* 创建网格模型
*/
var geometry = new THREE.Geometry() //空几何体
var p1 = new THREE.Vector3(0, 0, 0)
var p2 = new THREE.Vector3(0, 20, 0)
var p3 = new THREE.Vector3(0, 0, 20)
geometry.vertices.push(p1, p2, p3)
// 线 即材质对象为line 网格模型也为line
// var material = new THREE.LineBasicMaterial({
// color: 0xff0000 //线条颜色
// });//材质对象
// var line = new THREE.Line(geometry, material)
// scene.add(line)
// 点
// var material = new THREE.PointsMaterial({
// color: 0xff3040,
// size: 15
// })// 材质对象
// var points = new THREE.Points(geometry, material);//点模型对象
// scene.add(points)
// 三角面
// var geometry = new THREE.Geometry() //空几何体
// var p1 = new THREE.Vector3(0, 0, 0)
// var p2 = new THREE.Vector3(0, 50, 0)
// var p3 = new THREE.Vector3(0, 0, 50)
// geometry.vertices.push(p1, p2, p3)
// var normal = new THREE.Vector3(1, 0, 0) //面的法向量
// var face = new THREE.Face3(0, 1, 2, normal)
// geometry.faces.push(face)
// var material = new THREE.MeshLambertMaterial({
// color: 0xff3040,//三角面颜色
// side: THREE.DoubleSide//两面可见
// });//材质对象
// var mesh = new THREE.Mesh(geometry, material);//网格模型对象
// scene.add(mesh)
// 正方形面
// var geometry = new THREE.Geometry() //空几何体
// var p1 = new THREE.Vector3(0, 0, 0)
// var p2 = new THREE.Vector3(50, 0, 0)
// var p3 = new THREE.Vector3(0, 50, 0)
// var p4 = new THREE.Vector3(50, 50, 0)
// geometry.vertices.push(p1, p2, p3, p4)
// var normal = new THREE.Vector3(0, 0, 1) //面的法向量
// var face1 = new THREE.Face3(0, 1, 2, normal)
// var face2 = new THREE.Face3(3, 2, 1, normal)
// geometry.faces.push(face1, face2)
// var material = new THREE.MeshLambertMaterial({
// color: 0xff0000,//三角面颜色
// side: THREE.DoubleSide//两面可见
// });//材质对象
// var mesh = new THREE.Mesh(geometry, material);//网格模型对象
// scene.add(mesh)
// 颜色插值--彩色三角形
var geometry = new THREE.Geometry(); //声明一个空几何体对象
var p1 = new THREE.Vector3(0, 0, 0); //顶点1坐标
var p2 = new THREE.Vector3(80, 0, 0); //顶点2坐标
var p3 = new THREE.Vector3(0, 80, 0); //顶点3坐标
geometry.vertices.push(p1, p2, p3); //顶点坐标添加到geometry对象
var face = new THREE.Face3(0, 1, 2, normal); //创建三角面
/**顶点颜色**/
var color1 = new THREE.Color(0xFF0000);//顶点1颜色——红色
var color2 = new THREE.Color(0x00FF00);//顶点2颜色——绿色
var color3 = new THREE.Color(0x0000FF);//顶点3颜色——蓝色
var normal = new THREE.Vector3(0, 0, 1); //三角面法向量
face.vertexColors.push(color1, color2, color3);//定义三角面三个顶点的颜色
geometry.faces.push(face); //三角面添加到几何体
var material = new THREE.MeshLambertMaterial({
vertexColors: THREE.VertexColors,//以顶点颜色为准
side: THREE.DoubleSide//两面可见
});//材质对象
var mesh = new THREE.Mesh(geometry, material);//网格模型对象
scene.add(mesh);//网格模型添加到场景中
/**
* 光源设置
*/
//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(0, 0, 200);//点光源位置
scene.add(point);//点光源添加到场景中
//环境光
var ambient = new THREE.AmbientLight(0x999999);
scene.add(ambient);
/**
* 相机设置
*/
// var width = window.innerWidth;//窗口宽度
var width = document.getElementById('geometry').offsetWidth;//窗口宽度
// var height = window.innerHeight;//窗口高度
var height = document.getElementById('geometry').offsetHeight;//窗口宽度
var k = width / height;//窗口宽高比
var s = 100;//三维场景缩放系数
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 200, 200);//设置相机位置
camera.lookAt(scene.position);//设置相机方向(指向的场景对象)
/**
* 创建渲染器对象
*/
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0xb9d3ff, 1);//设置背景颜色
document.getElementById('geometry').appendChild(renderer.domElement);//body元素中插入canvas对象
function render() {
renderer.render(scene, camera);//执行渲染操作
}
render();
var controls = new THREE.OrbitControls(camera);//创建控件对象
controls.addEventListener('change', render);//监听鼠标、键盘事件
</script>
</body>
效果图：
点线面的创建不过是使用了不同的three.js中提供的材质方法和网格模型方法，而面的创建不过是三点形成一个三角形，两个三角形组成一个方形等等，继续扩展...
