WebService / ben-test · Files

import { Vector3, Matrix4, Quaternion, Vector2, Object3D, EventDispatcher } from 'three';
import { drawTriangle, drawCircle, drawCone, drawPoint, drawFatLine, drawTorusOutline } from './draw';

const getBoundarybox = (geometry, matrix = new Matrix4()) => {
    let max_x = -1000;
    let max_y = -1000;
    let max_z = -1000;
    let min_x = 1000;
    let min_y = 1000;
    let min_z = 1000;
    let position = geometry.getAttribute('position');
    if (!position) {
        return null;
    }
    let i = 0;
    while (i < position.count) {
        let vertex = { x: position.getX(i), y: position.getY(i), z: position.getZ(i) };
        let vector3 = new Vector3(vertex.x, vertex.y, vertex.z);
        vector3.applyMatrix4(matrix);
        if (vector3.x > max_x) {
            max_x = vector3.x;
        }
        if (vector3.y > max_y) {
            max_y = vector3.y;
        }
        if (vector3.z > max_z) {
            max_z = vector3.z;
        }
        if (vector3.x < min_x) {
            min_x = vector3.x;
        }
        if (vector3.y < min_y) {
            min_y = vector3.y;
        }
        if (vector3.z < min_z) {
            min_z = vector3.z;
        }
        ++i;
    }
    let box = {
        max: new Vector3(max_x, max_y, max_z),
        min: new Vector3(min_x, min_y, min_z),
        center: new Vector3((min_x + max_x) * 0.5, (min_y + max_y) * 0.5, (min_z + max_z) * 0.5)
    };
    return box;
};
const getGeometryCenter = (geometry, matrix = new Matrix4()) => {
    let position = geometry.getAttribute('position');
    if (!position) {
        return null;
    }
    let x = 0,
        y = 0,
        z = 0;
    for (let i = 0; i < position.count; i++) {
        let vertex = { x: position.getX(i), y: position.getY(i), z: position.getZ(i) };
        let vector3 = new Vector3(vertex.x, vertex.y, vertex.z);
        vector3.applyMatrix4(matrix);
        x += vector3.x;
        y += vector3.y;
        z += vector3.z;
    }
    return new Vector3(x / position.count, y / position.count, z / position.count);
};
const computeProjectPointOnPlane = (normal, planePoint, spacePoint) => {
    let m = normal.x;
    let n = normal.y;
    let s = normal.z;

    let a = planePoint.x;
    let b = planePoint.y;
    let c = planePoint.z;

    let x0 = spacePoint.x;
    let y0 = spacePoint.y;
    let z0 = spacePoint.z;

    let t = -1 * ((m * (x0 - a) + n * (y0 - b) + s * (z0 - c)) / (m * m + n * n + s * s));
    let x = m * t + x0;
    let y = n * t + y0;
    let z = s * t + z0;
    return new Vector3(x, y, z);
};

/**
 * create plane mesh : plane、draw line、plane direction hint and initial style
 */
class CreatePlaneMesh {
    constructor(domElement, scene, camera) {
        this._scene = scene;
        this._camera = camera;
        this._domElement = domElement;

        this.initPointMesh = null;
        this.initLineMesh = null;
        this.initPlaneMesh = null;

        this.planeName = '';
        this.planeColor = 0xffa41e;
        this.planeSize = 100;
    }

    setPlaneProperty = (planeName, planeColor, planeSize = 100) => {
        this.planeName = planeName;
        this.planeColor = planeColor;
        this.planeSize = planeSize;
    };

    initLine = () => {
        const defaultPositions = [0, 0, 0, 0, 0, 1];
        const resolution = new Vector2(this._domElement.clientWidth, this._domElement.clientHeight);

        const line = drawFatLine(defaultPositions, 0x000000, resolution, 1.8, 1.0, false);
        line.renderOrder = 10;
        line.name = 'line';
        line.visible = true;

        const initPoints = drawPoint(new Vector3(), 0x000, 0.4);
        initPoints.material.depthTest = false;
        initPoints.material.transparent = true;
        initPoints.visible = false;

        const initArrow = drawCone(0x000000);
        initArrow.material.depthTest = false;
        initArrow.material.transparent = true;
        initArrow.name = 'arrow';

        const group = new Object3D();
        group.add(line).add(initArrow);
        group.renderOrder = 10;
        group.position.z = -0.2;
        group.depthTest = false;
        group.scale.setScalar(1);
        group.visible = false;

        this.initPointMesh = initPoints;
        this.initLineMesh = group;
    };

    initPlane = () => {
        const size = this.planeSize * 0.2 - 0.4;
        const pointa = new Vector3(-size * 0.5, 0);
        const pointb = new Vector3(size * 0.5, 0, 0);
        const pointc = new Vector3(0, size * 0.3, 0);
        const mesh = drawTriangle(pointa, pointb, pointc, this.planeColor);
        const group = new Object3D();
        group.add(mesh);
        this.initCirclePlane();
    };

    initCirclePlane = () => {
        const halfEdge = this.planeSize * 0.2;
        // add plane
        const circlePlane = drawCircle(halfEdge, 0xadadad);
        const circleoutline = drawTorusOutline(halfEdge);

        const clipPlane = new Object3D();
        clipPlane.add(circlePlane);
        clipPlane.add(circleoutline);

        clipPlane.matrixAutoUpdate = false;
        clipPlane.matrixWorldNeedsUpdate = true;
        clipPlane.name = this.planeName;
        clipPlane.visible = false;

        this.initPlaneMesh = clipPlane;
        if (this._scene) {
            const plane = this._scene.getObjectByName(this.planeName);
            if (plane) this._scene.remove(plane);
            this._scene.add(this.initPlaneMesh);
        }
    };

    updateInitLine = (worldStart, worldEnd) => {
        if (!this.initLineMesh) return;
        // update initLine
        this.initLineMesh.children.forEach((el) => {
            if (el.name === 'line' || el.name === 'dashline') {
                el.geometry.setPositions([
                    worldStart.x,
                    worldStart.y,
                    worldStart.z,
                    worldEnd.x,
                    worldEnd.y,
                    worldEnd.z
                ]);
                el.computeLineDistances();
            } else {
                const initVector = new Vector3(0, 1, 0);
                const tangent = worldEnd.clone().sub(worldStart);
                tangent.normalize();
                const quaternion = new Quaternion().setFromUnitVectors(initVector, tangent);
                const matrix = new Matrix4().makeRotationFromQuaternion(quaternion);
                matrix.setPosition(worldEnd.x, worldEnd.y, 0);
                el.quaternion.copy(quaternion);
                el.position.copy(worldEnd);
            }
        });
        this.initLineMesh.visible = true;
    };

    updateInitPoint = (_startX, _startY, _camera) => {
        if (!this.initPointMesh) return;
        const worldStart = new Vector3(_startX, _startY, 0);
        worldStart.applyMatrix4(_camera.projectionMatrixInverse);
        this.initPointMesh.position.set(worldStart.x, worldStart.y, worldStart.z);
        this.initPointMesh.visible = true;
    };

    updateInitPlane = (normal, planePassPoint, offsetCenter) => {
        if (!planePassPoint.a) return;
        const originPlaneNormal = new Vector3(0, 0, 1);

        // rotate plane from origin to sectionLine normal vector
        const quaternion = new Quaternion().setFromUnitVectors(originPlaneNormal, normal);
        const matrix = new Matrix4().makeRotationFromQuaternion(quaternion);

        // move plane position to mesh center projected point on plane
        const point = computeProjectPointOnPlane(normal, planePassPoint.a, offsetCenter);
        matrix.setPosition(point);

        planePassPoint.c = point.clone();
        this.initPlaneMesh.visible = true;
        if (this.initPlaneMesh) this.initPlaneMesh.matrix = matrix;
    };
}

/**
 * Using mouse left button to draw a line on screen and crate a section plane on scene
 * plane parameter : a point on plane and plane normal vector
 */
class CutPlaneControl extends EventDispatcher {
    constructor({ camera, scene, domElement, control }) {
        super();
        this._camera = camera;
        this._scene = scene;
        this._domElement = domElement;
        this._control = control;

        if (domElement === undefined) {
            console.warn('CutPlaneControl: The third parameter "domElement" is now mandatory.');
            this._domElement = document;
        }

        this.startX = -Infinity;
        this.startY = -Infinity;

        this.endX = -Infinity;
        this.endY = -Infinity;

        this.dragging = false;

        this.meshCenter = new Vector3();
        this.planeName = 'sectionPlane';
        this.planeNormal = null;
        this.tangent = null;
        this.planePassPoint = {
            // a plane passing through 3 points
            a: null,
            b: null,
            c: null
        };

        this.enabled = true;

        this._planeMesh = null;
        this.initSectionLine();
        this.addEvents();

        this.activeMesh = null;
    }

    // limit plane size by mesh boundarybox size
    setPlane = (meshProperty, color = 0x000000) => {
        const { mesh } = meshProperty;
        this.activeMesh = mesh;
        const { geometry, matrix } = mesh;
        if (!geometry) return;
        const box = getBoundarybox(geometry, matrix);
        const center = getGeometryCenter(geometry, matrix);
        let size = 100;
        if (box) {
            size = box.max.distanceTo(box.min) + 0.5; // error value
            this.meshCenter = center.clone();
        }
        if (!this._planeMesh) return;
        this._planeMesh.setPlaneProperty(this.planeName, color, size);
        this._planeMesh.initPlane();
    };

    setLineColor = (color, dashColor) => {
        const re = /^[a-fA-F0-9]+$/;
        if (re.test(color) && color === +color) {
            if (!this._planeMesh) return;
            const { initLineMesh, initPointMesh } = this._planeMesh;
            initLineMesh.children.forEach((el) => {
                const _color = el.name == 'line' ? color : dashColor;
                el.material.color.set(_color).convertSRGBToLinear();
            });
            initPointMesh.material.color.set(color).convertSRGBToLinear();
        }
    };

    getPlaneParameter = () => {
        return {
            normal: this.planeNormal,
            planePassPoint: this.planePassPoint
        };
    };

    addEvents = () => {
        this._domElement.addEventListener('pointerdown', this.onPointerdown);
        this._domElement.addEventListener('pointerup', this.onPointerup);
        this._domElement.addEventListener('pointermove', this.onPointermove);
    };

    removeEvents = () => {
        this._domElement.removeEventListener('pointerdown', this.onPointerdown);
        this._domElement.removeEventListener('pointerup', this.onPointerup);
        this._domElement.removeEventListener('pointermove', this.onPointermove);
        this.invisiblePlane();
    };

    destoryPlane = () => {
        this.removePlane();
        this.planeNormal = null;
        this.tangent = null;
        this.planePassPoint = {
            a: null,
            b: null,
            c: null
        };
    };

    invisiblePlane = () => {
        const object = this._scene.getObjectByName(this.planeName);
        if (object) object.visible = false;
        this.planeNormal = null;
        this.tangent = null;
        this.planePassPoint = {
            a: null,
            b: null,
            c: null
        };
    };

    dispose = () => {
        this.planeNormal = null;
        this.tangent = null;
        this.planePassPoint = {
            a: null,
            b: null,
            c: null
        };
        this.enabled = true;
        this.removeEvents();
        this.destoryPlane();
        if (!this._planeMesh) return;
        const { initLine } = this._planeMesh;
        if (!initLine) return;
        if (initLine.geometry) initLine.geometry.dispose();
        if (initLine.material) initLine.material.dispose();
        this._camera.remove(initLine);
        const a = document.getElementById('blank');
        if (a) a.style.cursor = 'default';
    };

    getScreenCoordinate = (e, domElement) => {
        const rect = domElement.getBoundingClientRect();
        return {
            x: ((e.clientX - rect.left) / domElement.clientWidth) * 2 - 1,
            y: -(((e.clientY - rect.top) / domElement.clientHeight) * 2 - 1)
        };
    };

    onPointerdown = (e) => {
        if (!this.enabled) return;
        if (e.button !== 0) return;
        const { x, y } = this.getScreenCoordinate(e, this._domElement);
        this.startX = x;
        this.startY = y;
        this.dragging = true;
        if (this._planeMesh) this._planeMesh.updateInitPoint(this.startX, this.startY, this._camera);
        if (this._control) this._control.enabled = false;
    };

    onPointerup = (e) => {
        if (this._control) this._control.enabled = true;
        if (!this.enabled) return;
        this.dragging = false;
        if (e.button !== 0) return;
        if (!this._planeMesh) return;

        const { initLineMesh, initPointMesh, initPlaneMesh } = this._planeMesh;

        if (initLineMesh) initLineMesh.visible = false;
        if (initPointMesh) initPointMesh.visible = false;
        if (initPlaneMesh) {
            this._planeMesh.updateInitPlane(this.planeNormal, this.planePassPoint, this.meshCenter);
            this._sendEventTo();
        }
    };

    onPointermove = (e) => {
        if (!this.enabled) return;
        if ((1 & e.buttons) === 0) return;
        if (!this.dragging) return;
        if (!this._planeMesh) return;

        const camera = this._camera;
        camera.updateProjectionMatrix();

        const { x, y } = this.getScreenCoordinate(e, this._domElement);
        this.endX = x;
        this.endY = y;

        const worldStart = new Vector3(this.startX, this.startY, -1);
        const worldEnd = new Vector3(this.endX, this.endY, -1);

        // screen to world matrix
        worldStart.applyMatrix4(camera.projectionMatrixInverse);
        worldEnd.applyMatrix4(camera.projectionMatrixInverse);

        this._planeMesh.updateInitLine(worldStart, worldEnd);
        this.updatePlaneParameter(worldStart, worldEnd);
        this._changeCamera();
    };

    updatePlaneParameter = (startPoint, endPoint) => {
        const camera = this._camera;
        camera.updateProjectionMatrix();

        // points rotated by camera world matrix (mouse control to change view angle)
        const rotationMatrix = camera.matrixWorld;

        const worldStartPoint = startPoint.applyMatrix4(rotationMatrix);
        const worldEndPoint = endPoint.applyMatrix4(rotationMatrix);

        // tangent cross eyeVector to get plane normal
        const tangent = worldStartPoint.clone().sub(worldEndPoint);
        tangent.normalize();
        const eyeVector = new Vector3(
            camera.matrixWorld.elements[8],
            camera.matrixWorld.elements[9],
            camera.matrixWorld.elements[10]
        );
        eyeVector.normalize();

        this.planeNormal = tangent.clone().cross(eyeVector).normalize();
        this.tangent = tangent.clone();
        this.planePassPoint.a = worldStartPoint.clone(); // point on plane
        this.planePassPoint.b = worldEndPoint.clone();
    };

    // draw line on camera
    initSectionLine = () => {
        if (!this._camera) return;
        if (!this._planeMesh) {
            const _plane = new CreatePlaneMesh(this._domElement, this._scene, this._camera);
            _plane.initLine();
            this._planeMesh = _plane;
            const { initPointMesh, initLineMesh } = this._planeMesh;
            this._camera.add(initPointMesh);
            this._camera.add(initLineMesh);
        }
    };

    initCursor = (isDefault = true) => {
        let a = document.getElementById('blank');
        if (a) a.style.cursor = isDefault ? 'cursor' : 'default';
    };

    removePlane = () => {
        const scene = this._scene;
        const object = scene.getObjectByName(this.planeName);
        if (object) {
            if (object.geometry) object.geometry.dispose();
            if (object.material) object.material.dispose();
            scene.remove(object);
        }
    };

    _changeCamera = () => {
        if (!this._camera) return;

        const camera = this._camera;
        const factor = (camera.top - camera.bottom) / camera.zoom;
        const zoom = ((factor * 1) / 4) * 0.1;

        const { initPointMesh, initLineMesh } = this._planeMesh;

        if (initPointMesh) {
            initPointMesh.matrixAutoUpdate = true;
            initPointMesh.matrixWorldNeedsUpdate = false;
            initPointMesh.scale.set(1, 1, 1).multiplyScalar(zoom);
        }

        if (initLineMesh) {
            initLineMesh.children.forEach((el) => {
                if (el.type !== 'Line2') {
                    el.matrixAutoUpdate = true;
                    el.matrixWorldNeedsUpdate = false;
                    el.scale.set(1, 1, 1).multiplyScalar(zoom);
                    el.position.set(el.position.x, el.position.y, -2);
                }
            });
        }
    };

    _sendEventTo = () => {
        const { initPlaneMesh, initPointMesh } = this._planeMesh;
        const event = {
            type: 'pointerUp',
            message: {
                normal: this.planeNormal.clone(),
                tangent: this.tangent.clone(),
                passPoint: initPointMesh.position.clone(),
                matrix: initPlaneMesh.matrix.clone()
            }
        };
        this.dispatchEvent(event);
    };
}
export default CutPlaneControl;