drawGrid.js 1.07 KB
import {
    Object3D,
    GridHelper,
    Vector3,
    BufferGeometry,
    LineBasicMaterial,
    Line
} from 'three';

export const drawGrid = (size, divisions) => {
    const grid = new GridHelper(size, divisions, '', '#E0E1E4');
    grid.rotation.x = Math.PI / 2;
    grid.transparent = true;
    grid.opcity = 0.1;
    return grid;
};

const drawLine = (p0, p1, color) => {
    const points = [p0, p1];
    const geometry = new BufferGeometry().setFromPoints(points);
    const material = new LineBasicMaterial({
        color,
        transparent: true,
        opacity: 0.2
    });
    const line = new Line(geometry, material);
    return line;
};

export const drawGridCrossLine = (
    size,
    xColor = 0xcc4939,
    yColor = 0x2baf5e
) => {
    const xLine = drawLine(
        new Vector3(-size, 0, 0),
        new Vector3(size, 0, 0),
        xColor
    );
    const yLine = drawLine(
        new Vector3(0, -size, 0),
        new Vector3(0, size, 0),
        yColor
    );

    const crosslines = new Object3D();
    crosslines.add(xLine).add(yLine);

    return crosslines;
};