How to use the three.Vector2 function in three

To help you get started, we’ve selected a few three examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github ykob / sketch-threejs / src / js / sketch / transform / init.js View on Github external
antialias: true,
    canvas: canvas,
    alpha: true
  });
  const renderBack1 = new THREE.WebGLRenderTarget(0, 0);
  const renderBack2 = new THREE.WebGLRenderTarget(0, 0);
  const renderBack3 = new THREE.WebGLRenderTarget(0, 0);
  const scene = new THREE.Scene();
  const sceneBack = new THREE.Scene();
  const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
  const cameraBack = new THREE.PerspectiveCamera(30, 1, 1, 15000);
  const clock = new THREE.Clock();
  const loader = new THREE.TextureLoader();

  const vectorTouchStart = new THREE.Vector2();
  const vectorTouchMove = new THREE.Vector2();
  const vectorTouchEnd = new THREE.Vector2();

  let isDrag = false;

  //
  // process for this sketch.
  //

  const BUTTERFLY_NUM = 1;
  const PARTICLE_NUM = 32;
  const BRIGHT_MIN = 0.7;

  const butterflies = [];
  const points = new Points(BUTTERFLY_NUM * PARTICLE_NUM);
  const floor = new Floor(resolution);
  const postEffectBright = new PostEffectBright(BRIGHT_MIN, renderBack1.texture);
github ali1k / ld-r / components / dataset / orbitcontrols.js View on Github external
const EPS = 0.000001;

	const rotateStart = new THREE.Vector2();
	const rotateEnd = new THREE.Vector2();
	const rotateDelta = new THREE.Vector2();

	const panStart = new THREE.Vector2();
	const panEnd = new THREE.Vector2();
	const panDelta = new THREE.Vector2();
	const panOffset = new THREE.Vector3();

	const offset = new THREE.Vector3();

	const dollyStart = new THREE.Vector2();
	const dollyEnd = new THREE.Vector2();
	const dollyDelta = new THREE.Vector2();

	let theta;
	let phi;
	let phiDelta = 0;
	let thetaDelta = 0;
	let scale = 1;
	let pan = new THREE.Vector3();

	let lastPosition = new THREE.Vector3();
	let lastQuaternion = new THREE.Quaternion();


	// for reset

	this.target0 = this.target.clone();
	this.position0 = this.object.position.clone();
github akella / ExplodingObjects / src / icosahedron.js View on Github external
},
      side: THREE.DoubleSide,
      uniforms: {
        time: { type: "f", value: 0 },
        progress: { type: "f", value: 0 },
        inside: { type: "f", value: 0 },
        surfaceColor: { type: "v3", value: this.surfaceColor },
        insideColor: { type: "v3", value: this.insideColor },
        // matcap: { type: 't', value: new THREE.TextureLoader().load('img/matcap.jpg') },
        tCube: { value: that.textureCube },
        pixels: {
          type: "v2",
          value: new THREE.Vector2(window.innerWidth, window.innerHeight)
        },
        uvRate1: {
          value: new THREE.Vector2(1, 1)
        }
      },
      vertexShader: vertex,
      fragmentShader: fragment
    });

    this.material1 = this.material.clone();
    this.material1.uniforms.inside.value = 1;
  }
github ykob / sketch-threejs / src / js / sketch / newyear2019 / init.js View on Github external
export default async function() {
  // ==========
  // Define common variables
  //
  const uaParser = new UaParser();
  const os = uaParser.getOS().name;
  const resolution = new THREE.Vector2();
  const mouse = new THREE.Vector2();
  const canvas = document.getElementById('canvas-webgl');
  const renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true,
    canvas: canvas,
  });
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera();
  const clock = new THREE.Clock({
    autoStart: false
  });

  // For the post effect.
  const renderTarget1 = new THREE.WebGLRenderTarget();
  const renderTarget2 = new THREE.WebGLRenderTarget();
  const scenePE = new THREE.Scene();
github UDST / vizicities / src / vendor / OrbitControls.js View on Github external
var EPS = 0.000001;

	// current position in spherical coordinates
	var theta;
	var phi;

	var phiDelta = 0;
	var thetaDelta = 0;
	var scale = 1;
	var panOffset = new THREE.Vector3();
	var zoomChanged = false;

	var rotateStart = new THREE.Vector2();
	var rotateEnd = new THREE.Vector2();
	var rotateDelta = new THREE.Vector2();

	var panStart = new THREE.Vector2();
	var panEnd = new THREE.Vector2();
	var panDelta = new THREE.Vector2();

	var dollyStart = new THREE.Vector2();
	var dollyEnd = new THREE.Vector2();
	var dollyDelta = new THREE.Vector2();

	function getAutoRotationAngle() {

		return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;

	}

	function getZoomScale() {
github heremaps / harp.gl / @here / harp-map-controls / lib / Utils.ts View on Github external
export function calculateNormalizedDeviceCoordinates(
    screenCoordinateX: number,
    screenCoordinateY: number,
    screenSizeX: number,
    screenSizeY: number
): Vector2 {
    return new Vector2(
        (screenCoordinateX / screenSizeX) * 2 - 1,
        -((screenCoordinateY / screenSizeY) * 2) + 1
    );
}
github socialtables / openfpc / src / lib / guide-snapping.js View on Github external
entityId: pointId,
    type: "grid",
    pos: entityPos,
    tangent: new Vector2(1, 0)
  });
  if (boundary) {
    const startPoint = entities.get(boundary.get("start"));
    const endPoint = entities.get(boundary.get("end"));
    if (!startPoint || !endPoint) {
      return guides;
    }
    const startPos = startPoint.toVector2();
    const endPos = endPoint.toVector2();
    const tangent = endPos.clone().sub(startPos);
    tangent.normalize();
    const normal = new Vector2(-tangent.y, tangent.x);
    guides.push({
      entityId: pointId,
      type: "boundaryNormal",
      pos: entityPos,
      tangent: normal
    });
  }
  if (entities.get(pointId)) {
    const connectedBoundaries = entities.filter(e => (
      e.get("type") === "boundary" &&
      !e.get("arc") &&
      (e.get("start") === pointId || e.get("end") === pointId)
    ));
    connectedBoundaries.forEach(entity => {
      const entityId = entity.get("id");
      const startPoint = entities.get(entity.get("start"));
github openworm / org.geppetto.frontend / src / main / webapp / js / components / interface / 3dCanvas / GEPPETTO.SceneFactory.js View on Github external
geometry.vertices.push(
                    new THREE.Vector3(x1,y1,z1),//vertex0
                    new THREE.Vector3(x2,y2,z2),//1
                    new THREE.Vector3(x3,y3,z3),//2
                    new THREE.Vector3(x4,y4,z4)//3
                );
                geometry.faces.push(
                    new THREE.Face3(2,1,0),//use vertices of rank 2,1,0
                    new THREE.Face3(3,1,2)//vertices[3],1,2...
                );
                geometry.computeBoundingBox();

                var max = geometry.boundingBox.max,
                    min = geometry.boundingBox.min;
                var offset = new THREE.Vector2(0 - min.x, 0 - min.y);
                var range = new THREE.Vector2(max.x - min.x, max.y - min.y);
                var faces = geometry.faces;

                geometry.faceVertexUvs[0] = [];

                for (var i = 0; i < faces.length ; i++) {

                    var v1 = geometry.vertices[faces[i].a], 
                        v2 = geometry.vertices[faces[i].b], 
                        v3 = geometry.vertices[faces[i].c];

                    geometry.faceVertexUvs[0].push([
                        new THREE.Vector2((v1.x + offset.x)/range.x ,(v1.y + offset.y)/range.y),
                        new THREE.Vector2((v2.x + offset.x)/range.x ,(v2.y + offset.y)/range.y),
                        new THREE.Vector2((v3.x + offset.x)/range.x ,(v3.y + offset.y)/range.y)
                    ]);
                }
github cvdlab / react-planner / demo / src / catalog / items / camera / planner-element.jsx View on Github external
mesh_1.rotation.y+=Math.PI/2;
  mesh_1.rotation.z+=-Math.PI;

  let mesh_2 = new Three.Mesh( geometry4, grey );
  mesh_2.position.set(-0.05,-0.07,0.3);
  mesh_2.rotation.y+=Math.PI/2;

  body.add(mesh_1);
  body.add(mesh_2);

  let points = [];

  points.push( new Three.Vector2(0.2, 0));
  points.push( new Three.Vector2(0.2, 0));
  points.push( new Three.Vector2(0.2, 0.2));
  points.push( new Three.Vector2(0.2, 0.2));

  let geometry = new Three.LatheGeometry( points, 200, 0, Math.PI );
  grey.side = Three.DoubleSide;
  let cover_2 = new Three.Mesh(geometry,grey);
  cover_2.position.set(0,0.2,0);
  cover_2.rotation.y+=Math.PI/2;
  body.add(cover_2);

  let cylinderGeometry9 = new Three.CylinderGeometry(0.025,0.02,0.3,80,16);
  let antenna_p1 = new Three.Mesh(cylinderGeometry9,black);
  antenna_p1.rotation.x+=Math.PI/2;
  antenna_p1.position.set(0,-0.5,-0.18);
  body.add(antenna_p1);

  let cylinderGeometry10 = new Three.CylinderGeometry(0.02,0.015,0.3,80,16);
  let antenna_p2 = new Three.Mesh(cylinderGeometry10,black);
github toxicFork / react-three-renderer-example / src / examples / GeometryShapes / Resources.js View on Github external
this.textureRepeat = new THREE.Vector2(0.008, 0.008);

    const x = 0;
    const y = 0;

    const sqLength = 80;

    const rectLength = 120;
    const rectWidth = 40;

    const californiaPts = [];

    californiaPts.push(new THREE.Vector2(610, 320));
    californiaPts.push(new THREE.Vector2(450, 300));
    californiaPts.push(new THREE.Vector2(392, 392));
    californiaPts.push(new THREE.Vector2(266, 438));
    californiaPts.push(new THREE.Vector2(190, 570));
    californiaPts.push(new THREE.Vector2(190, 600));
    californiaPts.push(new THREE.Vector2(160, 620));
    californiaPts.push(new THREE.Vector2(160, 650));
    californiaPts.push(new THREE.Vector2(180, 640));
    californiaPts.push(new THREE.Vector2(165, 680));
    californiaPts.push(new THREE.Vector2(150, 670));
    californiaPts.push(new THREE.Vector2(90, 737));
    californiaPts.push(new THREE.Vector2(80, 795));
    californiaPts.push(new THREE.Vector2(50, 835));
    californiaPts.push(new THREE.Vector2(64, 870));
    californiaPts.push(new THREE.Vector2(60, 945));
    californiaPts.push(new THREE.Vector2(300, 945));
    californiaPts.push(new THREE.Vector2(300, 743));
    californiaPts.push(new THREE.Vector2(600, 473));
    californiaPts.push(new THREE.Vector2(626, 425));