threejs 笔记 07 —— 线

通过网格模型创建线

var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
// 线条渲染模式
var material = new THREE.LineBasicMaterial({
    color: 0xff0000, //线条颜色
}); //材质对象
// 创建线模型对象   构造函数：Line、LineLoop、LineSegments
var line = new THREE.Line(geometry, material); //线条模型对象
scene.add(line); //线条对象添加到场景中

通过设置顶点创建线

var geometry = new THREE.Geometry() //声明一个几何体对象Geometry
var p1 = new THREE.Vector3(100, 20, 0) //顶点1坐标
var p2 = new THREE.Vector3(0, 20, 0) //顶点2坐标
var p3 = new THREE.Vector3(100, 40, 0) //顶点3坐标
//顶点坐标添加到geometry对象
geometry.vertices.push(p1, p2, p3)

var material = new THREE.LineBasicMaterial({
    color: 0xffff00
}) //材质对象
//线条模型对象
var line = new THREE.Line(geometry, material)
scene.add(line) //线条对象添加到场景中

彩色的线条

/**
* 创建网格模型
*/
var geometry = new THREE.BufferGeometry(); //声明一个缓冲几何体对象

//类型数组创建顶点位置position数据
var vertices = new Float32Array([
  100, 20, 0, //顶点1坐标
  0, 20, 0, //顶点2坐标
  100, 40, 0 //顶点3坐标
]);
// 创建属性缓冲区对象
var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，作为一个顶点的xyz坐标
// 设置几何体attributes属性的位置position属性
geometry.attributes.position = attribue;


//类型数组创建顶点颜色color数据
var colors = new Float32Array([
  1, 0, 0, //顶点1颜色
  0, 1, 0, //顶点2颜色
  0, 0, 1, //顶点3颜色
]);
// 设置几何体attributes属性的颜色color属性
geometry.attributes.color = new THREE.BufferAttribute(colors, 3); //3个为一组,表示一个顶点的颜色数据RGB


//材质对象
var material = new THREE.LineBasicMaterial({
  // 使用顶点颜色数据渲染模型，不需要再定义color属性
  // color: 0xff0000,
  vertexColors: THREE.VertexColors, //以顶点颜色为准
});
// 线条渲染模式  线模型对象Line
var line = new THREE.Line(geometry, material); //点模型对象
scene.add(line); //点对象添加到场景中