three.js顶点概念知识点

知识点"/>

three.js顶点概念知识点

three.js-顶点

点

let geometry = new THREE.BufferGeometry();
let 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坐标
]);
let attribue = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribue;
// 点
let material = new THREE.PointsMaterial({color: 0x6c92fa,size: 10.0
});
let point = new THREE.Points(geometry, material);
this.scene.add(point);

线

let geometry = new THREE.BufferGeometry();
let 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坐标
]);
let attribue = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribue;
// 线
let material = new THREE.LineBasicMaterial({color: 0x6c92fa,
});
let line = new THREE.Line(geometry, material);
this.scene.add(line);

mesh面

let geometry = new THREE.BufferGeometry();
let 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坐标
]);
let attribue = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribue;
// mesh模型
let material = new THREE.MeshLambertMaterial({ color: 0x3dce6f });
let cube = new THREE.Mesh(geometry, material);
this.scene.add(cube);

box模型

let geometry = new THREE.BoxGeometry(100, 100, 100);
let material = new THREE.MeshLambertMaterial({color: 0x0000ff
});
let mesh = new THREE.Mesh(geometry, material);
this.scene.add(mesh);

点着色

let geometry = new THREE.BufferGeometry();
let 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坐标
]);
let attribue = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribue;
let colors = new Float32Array([1, 0, 0, //顶点1颜色0, 1, 0, //顶点2颜色0, 0, 1, //顶点3颜色1, 1, 0, //顶点4颜色0, 1, 1, //顶点5颜色1, 0, 1, //顶点6颜色
]);
geometry.attributes.color = new THREE.BufferAttribute(colors, 3);
let material = new THREE.PointsMaterial({// color: 0xff0000,vertexColors: THREE.VertexColors,size: 10.0
});
let points = new THREE.Points(geometry, material);
this.scene.add(points);

线-着色-渐变

let geometry = new THREE.BufferGeometry();
let 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坐标
]);
let attribue = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribue;
let colors = new Float32Array([1, 0, 0, //顶点1颜色0, 1, 0, //顶点2颜色0, 0, 1, //顶点3颜色1, 1, 0, //顶点4颜色0, 1, 1, //顶点5颜色1, 0, 1, //顶点6颜色
]);
geometry.attributes.color = new THREE.BufferAttribute(colors, 3);
// line
let material = new THREE.LineBasicMaterial({// color: 0x3dce6f,vertexColors: THREE.VertexColors,
});
let cube = new THREE.Line(geometry, material);
this.scene.add(cube);

面-着色-渐变

let geometry = new THREE.BufferGeometry();
let 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坐标
]);
let attribue = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribue;
let colors = new Float32Array([1, 0, 0, //顶点1颜色0, 1, 0, //顶点2颜色0, 0, 1, //顶点3颜色1, 1, 0, //顶点4颜色0, 1, 1, //顶点5颜色1, 0, 1, //顶点6颜色
]);
geometry.attributes.color = new THREE.BufferAttribute(colors, 3);
// mesh模型
let material = new THREE.MeshBasicMaterial({// color: 0x3dce6f,vertexColors: THREE.VertexColors,
});
let cube = new THREE.Mesh(geometry, material);
this.scene.add(cube);

three.js-顶点法向量

设置法向量之后，在光照下，模型更有棱角感。

let geometry = new THREE.BufferGeometry();
let vertices = new Float32Array([0, 0, 0, //顶点1坐标50, 0, 0, //顶点2坐标0, 100, 0, //顶点3坐标0, 0, 0, //顶点4坐标0, 0, 100, //顶点5坐标50, 0, 0, //顶点6坐标
]);
let attribue = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribue;
var normals = new Float32Array([0, 0, 1, //顶点1法向量0, 0, 1, //顶点2法向量0, 0, 1, //顶点3法向量0, 1, 0, //顶点4法向量0, 1, 0, //顶点5法向量0, 1, 0, //顶点6法向量
]);
// normal属性访问几何体顶点法向量数据
// 设置几何体attributes属性的位置normal属性
geometry.attributes.normal = new THREE.BufferAttribute(normals, 3);
let material = new THREE.MeshLambertMaterial({ color: 0x3dce6f });
let cube = new THREE.Mesh(geometry, material);
this.scene.add(cube);