three.js绘制多边形并更新顶点

three.js绘制多边形并更新顶点

先绘制一个正六边形

var geometry = new THREE.Geometry();

let p1 = angPos(r[0], 0);
let p2 = angPos(r[1], 60 * 1);
let p3 = angPos(r[2], 60 * 2);
let p4 = angPos(r[3], 60 * 3);
let p5 = angPos(r[4], 60 * 4);
let p6 = angPos(r[5], 60 * 5);

function angPos(r, ang) {
    let _ang = THREE.Math.degToRad(ang);
    let x = 3.6 * r * Math.sin(_ang), y = 3.6 * r * Math.cos(_ang);
    return [x, y]
}

geometry.vertices.push(
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(p1[0], p1[1], 0),
    new THREE.Vector3(p2[0], p2[1], 0),
    new THREE.Vector3(p3[0], p3[1], 0),
    new THREE.Vector3(p4[0], p4[1], 0),
    new THREE.Vector3(p5[0], p5[1], 0),
    new THREE.Vector3(p6[0], p6[1], 0),
);

geometry.faces.push(
    new THREE.Face3(0, 1, 2),
    new THREE.Face3(0, 2, 3),
    new THREE.Face3(0, 3, 4),
    new THREE.Face3(0, 4, 5),
    new THREE.Face3(0, 5, 6),
    new THREE.Face3(0, 6, 1),

);
var materiala = new THREE.MeshBasicMaterial({
    color: 0x00B2EA,
    transparent: true,
    opacity: 1.0,
    side: THREE.DoubleSide
});
let circle = new THREE.Mesh(geometry, material);
circle.name = "Angle";
scene.add(circle);

然后更新顶点

function runsixAngle(value){
    let r = value;
    let p1 = angPos(r[0], 0);
    let p2 = angPos(r[1], 60 * 1);
    let p3 = angPos(r[2], 60 * 2);
    let p4 = angPos(r[3], 60 * 3);
    let p5 = angPos(r[4], 60 * 4);
    let p6 = angPos(r[5], 60 * 5);

    function angPos(r, ang) {
        let _ang = THREE.Math.degToRad(ang);
        let x = 3.6 * r * Math.sin(_ang), y = 3.6 * r * Math.cos(_ang);
        return [x, y]
    }
    let vertices = [];
    vertices.push(
        new THREE.Vector3(0, 0, 0),
        new THREE.Vector3(p1[0], p1[1], 0),
        new THREE.Vector3(p2[0], p2[1], 0),
        new THREE.Vector3(p3[0], p3[1], 0),
        new THREE.Vector3(p4[0], p4[1], 0),
        new THREE.Vector3(p5[0], p5[1], 0),
        new THREE.Vector3(p6[0], p6[1], 0),
    );

    let obj = scene.getObjectByName("Angle");  
    // obj.geometry.vertices = vertices ;
    obj.geometry.vertices[2].set(0, 0, 0);
    obj.geometry.verticesNeedUpdate = true;
}

采用是Geometry,所以需要通过vertices[i].set的方式来更新顶点,直接使用等于的方式不行,在bufferGeometry中是可以这样操作的,但是buffer中的顶点坐标非常多,每个三角形都要用三个点来描述,一个三角形3个顶点坐标,而两个三角形需要6个顶点坐标,有两个是重复的。采用Geometry中存储的的是纯顶点坐标,因为有单独的faces数组来存储三角形面的信息。所以你可以根据你的需求使用。
在更新顶点的时候需要设置一下geometry.verticesNeedUpdate = true,这个很重要。

绘制的多边形长这样
在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页