用 three.js 绘制三维带箭头线

    需求：这个需求是个刚需啊！在一个地铁场景里展示逃生路线，这个路线肯定是要有指示箭头的，为了画这个箭头，我花了不少于十几个小时，总算做出来了，但始终有点问题。我对这个箭头的要求是，无论场景拉近还是拉远，这个箭头不能太大，也不能太小看不清，形状不能变化，否则就不像箭头了。

    使用到了 three.js 的 Line2.js 和一个开源库MeshLine.js

部分代码：

DrawPath.js：

/**
 * 绘制路线
 */

import * as THREE from '../build/three.module.js';
import { MeshLine, MeshLineMaterial, MeshLineRaycast } from '../js.my/MeshLine.js';

import { Line2 } from '../js/lines/Line2.js';
import { LineMaterial } from '../js/lines/LineMaterial.js';
import { LineGeometry } from '../js/lines/LineGeometry.js';
import { GeometryUtils } from '../js/utils/GeometryUtils.js';

import { CanvasDraw } from '../js.my/CanvasDraw.js';

import { Utils } from '../js.my/Utils.js';
import { Msg } from '../js.my/Msg.js';

let DrawPath = function () {

    let _self = this;

    let _canvasDraw = new CanvasDraw();
    let utils = new Utils();
    let msg = new Msg();

    this._isDrawing = false;
    this._path = [];
    this._lines = [];
    this._arrows = [];
    this.color = '#00F300';

    this._depthTest = true;
    this._hide = false;

    this._lastRefreshTime = new Date().getTime();

    let _side = 0;

    let viewerContainerId = '#threeCanvas';
    let viewerContainer = $(viewerContainerId)[0];

    let objects;
    let camera;
    let turn;
    let scene;

    let canvasTexture;
    let material;

    this.config = function (objects_, camera_, scene_, turn_) {
        objects = objects_;
        camera = camera_;
        turn = turn_;
        scene = scene_;

        this._oldDistance = 1;
        this._oldCameraPos = { x: camera.position.x, y: camera.position.y, z: camera.position.z }

        canvasTexture = _canvasDraw.drawArrow(THREE, renderer, 300, 100); //箭头

        material = new MeshLineMaterial({
            useMap: true,
            map: canvasTexture,
            color: new THREE.Color(_self.color),
            opacity: 1,
            resolution: new THREE.Vector2($(viewerContainerId).width(), $(viewerContainerId).height()),
            lineWidth: 50,
            depthTest: _self._depthTest,
            side: _side,
            repeat: new THREE.Vector2(1, 1),
            transparent: true,
            sizeAttenuation: 0
        });
    }

    this.start = function () {
        if (!this._isDrawing) {
            this._isDrawing = true;
            viewerContainer.addEventListener('click', ray);
            viewerContainer.addEventListener('mousedown', mousedown);
            viewerContainer.addEventListener('mouseup', mouseup);
        }
    }

    this.stop = function () {
        if (this._isDrawing) {
            this._isDrawing = false;
            viewerContainer.removeEventListener('click', ray);
            viewerContainer.removeEventListener('mousedown', mousedown);
            viewerContainer.removeEventListener('mouseup', mouseup);
        }
    }

    function mousedown(params) {
        this._mousedownPosition = { x: camera.position.x, y: camera.position.y, z: camera.position.z }
    }

    function mouseup(params) {
        this._mouseupPosition = { x: camera.position.x, y: camera.position.y, z: camera.position.z }
    }

    function ray(e) {
        turn.unFocusButton();

        let raycaster = createRaycaster(e.clientX, e.clientY);
        let objs = [];
        objects.all.map(object => {
            if (object.material.visible) {
                objs.push(object);
            }
        });
        let intersects = raycaster.intersectObjects(objs);
        if (intersects.length > 0) {
            let point = intersects[0].point;

            let distance = utils.distance(this._mousedownPosition.x, this._mousedownPosition.y, this._mousedownPosition.z, this._mouseupPosition.x, this._mouseupPosition.y, this._mouseupPosition.z);

            if (distance < 5) {
                _self._path.push({ x: point.x, y: point.y + 50, z: point.z });

                if (_self._path.length > 1) {
                    let point1 = _self._path[_self._path.length - 2];
                    let point2 = _self._path[_self._path.length - 1];

                    drawLine(point1, point2);
                    drawArrow(point1, point2);
                }
            }
        }
    }

    function createRaycaster(clientX, clientY) {
        let x = (clientX / $(viewerContainerId).width()) * 2 - 1;
        let y = -(clientY / $(viewerContainerId).height()) * 2 + 1;

        let standardVector = new THREE.Vector3(x, y, 0.5);

        let worldVector = standardVector.unproject(camera);

        let ray = worldVector.sub(camera.position).normalize();

        let raycaster = new THREE.Raycaster(camera.position, ray);

        return raycaster;
    }

    this.refresh = function () {
        if (new Date().getTime() - this._lastRefreshTime > 200) {
            this._lastRefreshTime = new Date().getTime();
            if (_self._path.length > 1) {
                let distance = utils.distance(this._oldCameraPos.x, this._oldCameraPos.y, this._oldCameraPos.z, camera.position.x, camera.position.y, camera.position.z);
                let ratio = 1;
                if (this._oldDistance != 0) {
                    ratio = Math.abs((this._oldDistance - distance) / this._oldDistance)
                }

                if (distance > 5 && ratio > 0.1) {
                    //console.log("======== DrawPath 刷新 ====================================================")
                    for (let i = 0; i < _self._path.length - 1; i++) {
                        let arrow = _self._arrows[i];
                        let point1 = _self._path[i];
                        let point2 = _self._path[i + 1];
                        refreshArrow(point1, point2, arrow);
                    }
                    this._oldDistance = distance;
                    this._oldCameraPos = { x: camera.position.x, y: camera.position.y, z: camera.position.z }
                }
            }
        }
    }

    function drawLine(point1, point2) {
        const positions = [];

        positions.push(point1.x / 50, point1.y / 50, point1.z / 50);
        positions.push(point2.x / 50, point2.y / 50, point2.z / 50);

        let geometry = new LineGeometry();
        geometry.setPositions(positions);

        geometry.setColors([
            parseInt(_self.color.substr(1, 2), 16) / 256,
            parseInt(_self.color.substr(3, 2), 16) / 256,
            parseInt(_self.color.substr(5, 2), 16) / 256,
            parseInt(_self.color.substr(1, 2), 16) / 256,
            parseInt(_self.color.substr(3, 2), 16) / 256,
            parseInt(_self.color.substr(5, 2), 16) / 256
        ]);

        let matLine = new LineMaterial({
            color: new THREE.Color(_self.color),
            linewidth: 0.0015, // in world units with size attenuation, pixels otherwise
            dashed: false,
            depthTest: _self._depthTest,
            side: _side,
            vertexColors: THREE.VertexColors,
            resolution: new THREE.Vector2(1, $(viewerContainerId).height() / $(viewerContainerId).width())
        });

        let line = new Line2(geometry, matLine);
        line.computeLineDistances();
        line.scale.set(50, 50, 50);

        scene.add(line);
        _self._lines.push(line);

    }

    function drawArrow(point1, point2) {
        var meshLine = _self.createArrowLine(point1, point2);

        var mesh = new THREE.Mesh(meshLine.geometry, material);
        mesh.scale.set(50, 50, 50);
        scene.add(mesh);
        _self._arrows.push(mesh);

    }

    function refreshArrow(point1, point2, arrow) {
        var meshLine = _self.createArrowLine(point1, point2);

        arrow.geometry = meshLine.geometry;
        arrow.material = material;

    }

    this.createArrowLine = function (point1, point2) {
        let centerPoint = { x: (point1.x + point2.x) / 2, y: (point1.y + point2.y) / 2, z: (point1.z + point2.z) / 2 };
        let distance = utils.distance(point1.x, point1.y, point1.z, point2.x, point2.y, point2.z);

        var startPos = { x: (point1.x + point2.x) / 2 / 50, y: (point1.y + point2.y) / 2 / 50, z: (point1.z + point2.z) / 2 / 50 }

        let d = utils.distance(centerPoint.x, centerPoint.y, centerPoint.z, camera.position.x, camera.position.y, camera.position.z);
        //console.log("d=", d);

        let sc = 0.035;
        var endPos = { x: startPos.x + (point2.x - point1.x) * sc * d / distance / 50, y: startPos.y + (point2.y - point1.y) * sc * d / distance / 50, z: startPos.z + (point2.z - point1.z) * sc * d / distance / 50 }

        var arrowLinePoints = [];
        arrowLinePoints.push(startPos.x, startPos.y, startPos.z);
        arrowLinePoints.push(endPos.x, endPos.y, endPos.z);

        let meshLine = new MeshLine();
        meshLine.setGeometry(arrowLinePoints);

        return meshLine;
    }

    this.setDepthTest = function (bl) {
        if (bl) {
            _self._depthTest = true;
            this._lines.map(line => {
                line.material.depthTest = true;
                line.material.side = 0;
            });
            this._arrows.map(arrow => {
                arrow.material.depthTest = true;
                arrow.material.side = 0;
            });
        } else {
            _self._depthTest = false;
            this._lines.map(line => {
                line.material.depthTest = false;
                line.material.side = THREE.DoubleSide;
            });
            this._arrows.map(arrow => {
                arrow.material.depthTest = false;
                arrow.material.side = THREE.DoubleSide;
            });
        }
    }

    this.getPath = function () {
        return this._path;
    }

    this.hide = function () {
        this._lines.map(line => scene.remove(line));
        this._arrows.map(arrow => scene.remove(arrow));
        this._hide = true;
    }

    this.show = function () {
        this._lines.map(line => scene.add(line));
        this._arrows.map(arrow => scene.add(arrow));
        this._hide = false;
    }

    this.isShow = function () {
        return !this._hide;
    }

    this.create = function (path, color) {
        _self.color = color;
        _self._path = path;

        material = new MeshLineMaterial({
            useMap: true,
            map: canvasTexture,
            color: new THREE.Color(_self.color),
            opacity: 1,
            resolution: new THREE.Vector2($(viewerContainerId).width(), $(viewerContainerId).height()),
            lineWidth: 50,
            depthTest: _self._depthTest,
            side: _side,
            repeat: new THREE.Vector2(1, 1),
            transparent: true,
            sizeAttenuation: 0
        });

        if (_self._path.length > 1) {
            for (let i = 0; i < _self._path.length - 1; i++) {
                let point1 = _self._path[i];
                let point2 = _self._path[i + 1];

                drawLine(point1, point2);
                drawArrow(point1, point2);
            }
        }
    }

    this.getDepthTest = function () {
        return _self._depthTest;
    }

    /**
     * 撤销
     */
    this.undo = function () {
        scene.remove(this._lines[this._lines.length - 1]);
        scene.remove(this._arrows[this._arrows.length - 1]);
        _self._path.splice(this._path.length - 1, 1);
        _self._lines.splice(this._lines.length - 1, 1);
        _self._arrows.splice(this._arrows.length - 1, 1);
    }

}

DrawPath.prototype.constructor = DrawPath;

export { DrawPath }

View Code