three#Vector2 JavaScript Examples

/** Gets the projection of a point onto a line.
	 * @param point the point
	 * @param start the starting coordinates of the line as THREE.Vector2
	 * @param end the ending coordinates of the line as THREE.Vector2
	 * @returns The point as THREE.Vector2.
	 */
	static closestPointOnLine(point, start, end)
	{
		// Inspired by: http://stackoverflow.com/a/6853926
		var tA = point.x - start.x;
		var tB = point.y - start.y;
		var tC = end.x - start.x;
		var tD = end.y - start.y;

		var tDot = tA * tC + tB * tD;
		var tLenSq = tC * tC + tD * tD;
		var tParam = tDot / tLenSq;

		var tXx, tYy;

		if (tParam < 0 || (start.x == end.x && start.y == end.y))
		{
			tXx = start.x;
			tYy = start.y;
		}
		else if (tParam > 1)
		{
			tXx = end.x;
			tYy = end.y;
		}
		else {
			tXx = start.x + tParam * tC;
			tYy = start.y + tParam * tD;
		}

		return new Vector2(tXx, tYy);
	}

/**
     * @param target {Element}
     */
    constructor(target) {
        this.target = target;
        this.manager = null;

        this.data = {

        };

        this.hammer = new Manager(this.target);
        this.initializeHammer();

        this.keyMove = new KeyMoveControls(this.target, 0.5, 0.1);
        this.keyHeight = new KeyHeightControls(this.target, 0.5, 0.2);
        this.mouseRotate = new MouseRotateControls(this.target, 1.5, -2, -1.5, 0.5);
        this.mouseAngle = new MouseAngleControls(this.target, 1.5, -2, -1.5, 0.5);
        this.touchPan = new TouchPanControls(this.target, this.hammer, 5, 0.15);

        this.started = false;

        this.clickStart = new Vector2();
        this.moveSpeed = 0.5;

        this.animationTargetHeight = 0;
    }

setCamera( camera ) {

		const cameras = this.cameras;
		const cameraMap = this.cameraMap;
		if ( ! cameraMap.has( camera ) ) {

			cameraMap.set( camera, new Vector2() );
			cameras.push( camera );
			return true;

		}
		return false;

	}

/**
     @param corners Is an array of points with x,y attributes
      @param startX X start coord for raycast
      @param startY Y start coord for raycast
	 */
	static pointInPolygon(point, corners, start)
	{
		start = start || new Vector2(0,0);
		var startX = start.x || 0;
		var startY = start.y || 0;

		//ensure that point(startX, startY) is outside the polygon consists of corners
		var tMinX = 0, tMinY = 0;
		var tI = 0;

		if (startX === undefined || startY === undefined)
		{
			for (tI = 0; tI < corners.length; tI++)
			{
				tMinX = Math.min(tMinX, corners[tI].x);
				tMinY = Math.min(tMinX, corners[tI].y);
			}
			startX = tMinX - 10;
			startY = tMinY - 10;
		}

		var tIntersects = 0;
		for (tI = 0; tI < corners.length; tI++)
		{
			var tFirstCorner = corners[tI], tSecondCorner;
			if (tI == corners.length - 1)
			{
				tSecondCorner = corners[0];
			}
			else
			{
				tSecondCorner = corners[tI + 1];
			}

			if (Utils.lineLineIntersect(start, point, tFirstCorner.x, tFirstCorner.y, tSecondCorner.x, tSecondCorner.y))
			{
				tIntersects++;
			}
		}
		// odd intersections means the point is in the polygon
		return ((tIntersects % 2) == 1);
	}

constructor(_objects, _camera) {
    this._objects = _objects;
    this._camera = _camera;
    this._plane = new Plane();
    this._raycaster = new Raycaster();

    _mouse = new Vector2();
    this._offset = new Vector3();
    this._intersection = new Vector3();
    this._worldPosition = new Vector3();
    this._inverseMatrix = new Matrix4();
    this._intersections = [];

    this._selected = null;
  }

constructor( options ) {

		super( options );

		this.isBlock = true;

		//

		this.size = new Vector2( 1, 1 );

		this.frame = new Frame( this.getBackgroundMaterial() );

		// This is for hiddenOverflow to work
		this.frame.onBeforeRender = () => {

			if ( this.updateClippingPlanes ) {

				this.updateClippingPlanes();

			}

		};

		this.add( this.frame );

		// Lastly set the options parameters to this object, which will trigger an update

		this.set( options );

	}

WaterPass = function(dt_size) {
  Pass.call(this)
  if (WaterShader === undefined) console.error('THREE.WaterPass relies on THREE.WaterShader')
  var shader = WaterShader
  this.uniforms = UniformsUtils.clone(shader.uniforms)
  if (dt_size === undefined) dt_size = 64
  this.uniforms['resolution'].value = new Vector2(dt_size, dt_size)
  this.material = new ShaderMaterial({
    uniforms: this.uniforms,
    vertexShader: shader.vertexShader,
    fragmentShader: shader.fragmentShader
  })
  this.camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1)
  this.scene = new Scene()
  this.quad = new Mesh(new PlaneBufferGeometry(2, 2), null)
  this.quad.frustumCulled = false // Avoid getting clipped
  this.scene.add(this.quad)
  this.factor = 0
  this.time = 0
}

constructor() {
		super({
            type: "FXAAMaterial",
            
			uniforms: {
				inputBuffer: new Uniform(null),
				resolution: { value: new Vector2(1 / 1024, 1 / 512) },
			},
            
            fragmentShader,
            vertexShader,
            
			depthWrite: false,
			depthTest: false

        });
        
		/** @ignore */
		this.toneMapped = false;
	}

/**
     * @param v {{x,y}}
     * @return {{x,y}}
     */
    TransformVertex(v) {
        const result = new Vector2(v.x, v.y).applyMatrix3(this.transform)
        if (this.type !== BlockContext.Type.DEFINITION &&
            this.type !== BlockContext.Type.NESTED_DEFINITION) {

            throw new Error("Unexpected transform type")
        }
        this.block.verticesCount++
        if (this.block.offset === null) {
            this.block.offset = result
            return new Vector2()
        }
        result.sub(this.block.offset)
        return result
    }

constructor() {
    // Define Geometry
    const geometry = new PlaneBufferGeometry(2, 2);

    // Define Material
    const material = new RawShaderMaterial({
      uniforms: {
        resolution: {
          value: new Vector2()
        },
        scale: {
          value: new Vector2(0.3, 0.3)
        },
        direction: {
          value: new Vector2()
        },
        texture: {
          value: null
        }
      },
      vertexShader: vs,
      fragmentShader: fs
    });

    // Create Object3D
    super(geometry, material);
    this.name = 'PostEffectBlur';
  }

/**
	 * Triggers an interaction on the screen (map), e.g. a mouse-click.
	 *
	 * This will first attempt to invoke the onClick() method on the Object3D (e.g. Markers) that has been clicked.
	 * And if none of those consumed the event, it will fire a <code>bluemapMapInteraction</code> event.
	 *
	 * @param screenPosition {Vector2} - Clicked position on the screen (usually event.x, event.y)
	 * @param data {object} - Custom event data that will be added to the interaction-event
	 */
	handleMapInteraction(screenPosition, data = {}) {
		let rootOffset = elementOffset(this.rootElement);
		let normalizedScreenPos = new Vector2(
			((screenPosition.x - rootOffset.top) / this.rootElement.clientWidth) * 2 - 1,
			-((screenPosition.y - rootOffset.left) / this.rootElement.clientHeight) * 2 + 1
		);

		if (this.map && this.map.isLoaded){
			this.raycaster.setFromCamera(normalizedScreenPos, this.camera);

			// check Object3D interactions
			let intersects = this.raycaster.intersectObjects([this.map.hiresTileManager.scene, this.map.lowresTileManager.scene, this.markers], true);
			let hit = null;
			let lowresHit = null;
			let hiresHit = null;
			let covered = false;
			for (let i = 0; i < intersects.length; i++) {
				if (intersects[i].object){
					let object = intersects[i].object;

					// check if deeply-visible
					let parent = object;
					let visible = parent.visible;
					while (visible && parent.parent){
						parent = parent.parent;
						visible = parent.visible;
					}

					if (visible) {
						if (!hit) hit = intersects[i];

						// find root-scene
						let parentRoot = object;
						while(parentRoot.parent) parentRoot = parentRoot.parent;

						if (parentRoot === this.map.lowresTileManager.scene) {
							if (!lowresHit) lowresHit = intersects[i];
						}

						if (parentRoot === this.map.hiresTileManager.scene) {
							if (!hiresHit) hiresHit = intersects[i];
						}

						if (!covered || (object.material && !object.material.depthTest)) {
							if (object.onClick && object.onClick({
								data: data,
								intersection: intersects[i]
							})) return;
						}

						if (parentRoot !== this.map.lowresTileManager.scene) {
							covered = true;
						}
					}
				}
			}

			// fire event
			dispatchEvent(this.events, "bluemapMapInteraction", {
				data: data,
				hit: hit,
				hiresHit: hiresHit,
				lowresHit: lowresHit,
				intersections: intersects,
				ray: this.raycaster.ray
			});
		}
	}

positionA() {

    const range = this._range + this.baseRange;
    const x = Math.cos(this.angle * Math.PI / 180) * range;
    const y = Math.sin(this.angle * Math.PI / 180) * range;
    return new Vector2(this.center.x + x, this.center.y + y);
  }

startPos = new Vector2()

/** */
	draw()
	{
		wallWidth = Dimensioning.cmToPixel(Configuration.getNumericValue(configWallThickness));
		wallWidthHover = Dimensioning.cmToPixel(Configuration.getNumericValue(configWallThickness))*0.7;
		wallWidthSelected = Dimensioning.cmToPixel(Configuration.getNumericValue(configWallThickness))*0.9;
		
		this.context.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);
		
		this._carbonsheet.draw();
		this.drawGrid();
		this.drawOriginCrossHair();

		// this.context.globalAlpha = 0.3;
		this.floorplan.getRooms().forEach((room) => {this.drawRoom(room);});
		// this.context.globalAlpha = 1.0;

		this.floorplan.getWalls().forEach((wall) => {this.drawWall(wall);});
		this.floorplan.getCorners().forEach((corner) => {
			this.drawCorner(corner);
//			this.drawCornerAngles(corner);
			});
		
		// this.context.globalAlpha = 0.3;
//		this.floorplan.getRooms().forEach((room) => {this.drawRoom(room);});
		// this.context.globalAlpha = 1.0;
		
		if (this.viewmodel.mode == floorplannerModes.DRAW)
		{
			this.drawTarget(this.viewmodel.targetX, this.viewmodel.targetY, this.viewmodel.lastNode);
			//Enable the below lines for measurement while drawing, still needs work as it is crashing the whole thing
			if(this.viewmodel.lastNode != null && this.viewmodel.lastNode != undefined)
			{
				var a = new Vector2(this.viewmodel.lastNode.x,this.viewmodel.lastNode.y);
				var b = new Vector2(this.viewmodel.targetX, this.viewmodel.targetY);
				var abvector = b.clone().sub(a);
				var midPoint = abvector.multiplyScalar(0.5).add(a);
				this.drawTextLabel(Dimensioning.cmToMeasure(a.distanceTo(b)), this.viewmodel.convertX(midPoint.x), this.viewmodel.convertY(midPoint.y));
				
				//Show angle to the nearest wall
				var vector = b.clone().sub(a);
				var sAngle = (vector.angle()*180) / Math.PI;
				var result = this.viewmodel.lastNode.closestAngle(sAngle);				
				var eAngle = result['angle'];
				var closestVector = result['point'].sub(a);
				
				var textDistance = 60;
				var radius = Math.min(textDistance, vector.length());
//				radius = Math.max(radius, )
				var location = vector.normalize().add(closestVector.normalize()).multiplyScalar(textDistance).add(a);
				
				var ox = this.viewmodel.convertX(this.viewmodel.lastNode.x);
				var oy = this.viewmodel.convertY(this.viewmodel.lastNode.y);
				var angle = Math.abs(eAngle - sAngle);
				angle = (angle > 180) ? 360 - angle : angle;
				angle = Math.round(angle * 10) / 10;				
				
				sAngle = (sAngle * Math.PI) / 180;
				eAngle = (eAngle * Math.PI) / 180;				
				
				this.context.strokeStyle = '#FF0000';
				this.context.lineWidth = 4;
				this.context.beginPath();
				this.context.arc(ox, oy, radius*0.5, Math.min(sAngle, eAngle), Math.max(sAngle, eAngle), false);
				this.context.stroke();
				this.drawTextLabel(`${angle}°`, this.viewmodel.convertX(location.x), this.viewmodel.convertY(location.y));
			}
		}
		this.floorplan.getWalls().forEach((wall) => {this.drawWallLabels(wall);});
		if(this.viewmodel._clickedWallControl != null)
		{
			this.drawCircle(this.viewmodel.convertX(this.viewmodel._clickedWallControl.x), this.viewmodel.convertY(this.viewmodel._clickedWallControl.y), 7, '#F7F7F7');
		}
	}

BlurPass = function (blur, resolution) {
    Pass.call(this);

    this.downSampleRatio = 2;
    this.blur = blur !== undefined ? blur : 0.8;
    this.resolution =
        resolution !== undefined
            ? new Vector2(resolution.x, resolution.y)
            : new Vector2(256, 256);
    var pars = {
        minFilter: LinearFilter,
        magFilter: LinearFilter,
        format: RGBAFormat,
    };
    var resx = Math.round(this.resolution.x / this.downSampleRatio);
    var resy = Math.round(this.resolution.y / this.downSampleRatio);

    this.renderTargetBlurBuffer1 = new WebGLRenderTarget(resx, resy, pars);
    this.renderTargetBlurBuffer1.texture.name = "BlurPass.blur1";
    this.renderTargetBlurBuffer1.texture.generateMipmaps = false;
    this.renderTargetBlurBuffer2 = new WebGLRenderTarget(
        Math.round(resx / 2),
        Math.round(resy / 2),
        pars
    );
    this.renderTargetBlurBuffer2.texture.name = "BlurPass.blur2";
    this.renderTargetBlurBuffer2.texture.generateMipmaps = false;

    this.separableBlurMaterial1 = this.getSeperableBlurMaterial(16);
    this.separableBlurMaterial1.uniforms["texSize"].value = new Vector2(
        resx,
        resy
    );
    this.separableBlurMaterial1.uniforms["kernelRadius"].value = 1;
    this.separableBlurMaterial2 = this.getSeperableBlurMaterial(16);
    this.separableBlurMaterial2.uniforms["texSize"].value = new Vector2(
        Math.round(resx / 2),
        Math.round(resy / 2)
    );
    this.separableBlurMaterial2.uniforms["kernelRadius"].value = 1;

    var copyShader = CopyShader;
    this.copyUniforms = UniformsUtils.clone(copyShader.uniforms);
    this.materialCopy = new ShaderMaterial({
        uniforms: this.copyUniforms,
        vertexShader: copyShader.vertexShader,
        fragmentShader: copyShader.fragmentShader,
        depthTest: false,
        depthWrite: false,
        transparent: true,
    });

    //this.needsSwap = false;
    this.fsQuad = new Pass.FullScreenQuad(null);
}

constructor (game) {
    this.game = game
    this.view = new Vector3()
    this.farnear = new Vector2()
    this.color = new Vector4()
    this.visible = true
  }

_pointer = new Vector2()