three.js顶点概念知识点_three.js float32array-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41993525/article/details/115381381

这篇博客详细探讨了three.js中的顶点概念，包括点、线、mesh面和box模型的创建。此外，还讨论了顶点着色、线的渐变着色以及面的渐变着色技术。最后，重点介绍了设置顶点法向量对于提升模型在光照下的立体感的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);