学习[threejs] threejs 通过 ParametricGeometry绘制双螺旋

360 阅读1分钟

threejs 通过 ParametricGeometry绘制双螺旋

双螺旋公式

image.png

先生成一个圆形

getHelicoid = (
    u: number,
    v: number,
    target: THREE.Vector3
) => {
    let alpha = Math.PI * 2 * u;
    let theta = Math.PI * 2 * v;
    // const bottom =
    //     1 + Math.sinh(alpha) * Math.cosh(theta);

    const x = Math.sin(alpha) * Math.cos(theta);
    const y = Math.sin(alpha) * Math.sin(theta);
    const z = Math.cos(alpha);
    target.set(x, y, z);
};
getBox() {
    console.log("init standbox");
    /**
         * 参数化几何体
         * @param func 参数函数
         * @param slices
         * @param stacks
         */
    const geometry = new ParametricGeometry(
        this.getHelicoid,
        25,
        25
    );
    const material = new THREE.MeshPhysicalMaterial({
        color: 0x141414,
        roughness: 0,
        metalness: 0,
        clearcoat: 0.2,
        wireframe: true,
    });
    console.log(material);
    const mesh = new THREE.Mesh(geometry, material);
    return mesh;
}

效果

image.png

getHelicoid = (u: number, v: number, target: THREE.Vector3) => {
    let alpha = Math.PI * 2 * (u - 0.5);
    let theta = Math.PI * 2 * (v - 0.5);
    const t = 10; // 扭矩
    const bottom = 1 + Math.cosh(alpha) * Math.cosh(theta);

    const x = (Math.sinh(alpha) * Math.cos(t * theta)) / bottom;
    const z = (Math.sinh(alpha) * Math.sin(t * theta)) / bottom;
    const y = (Math.cosh(alpha) * Math.sinh(theta)) / bottom;
    target.set(x, y, z);
};