msforest / notebook

好记性不如烂笔头,记录知识的点点滴滴。
https://github.com/msforest/notebook/wiki
0 stars 0 forks source link

three 视角调整 #44

Open msforest opened 1 year ago

msforest commented 1 year ago
resetCameraPos = (position = new THREE.Vector3(0, 0, 0)) => {
    this.controls.target.copy(position);
    this.controls3d.target.copy(position);

    const pos = new THREE.Vector3(
      PARAMS.camera.position.x,
      PARAMS.camera.position.y,
      PARAMS.camera.position.z,
    );
    this.camera.position.copy(position.add(pos));
    this.camera.updateProjectionMatrix();
    this.controls.update();
    this.controls3d.update();
  };
msforest commented 1 year ago

画连线(弧形)

private addFlyLine = (
    from: THREE.Vector3,
    to: THREE.Vector3,
    data: any,
  ) => {
    const group = new THREE.Group();
    group.name = Lines.Arc;
    const start = from.clone().setY(4).setX(from.x > 0 ? from.x - 2 : from.x + 1);
    const end = to.clone().setY(4).setX(to.x > 0 ? to.x - 2 : to.x + 1);

    const distance = start.distanceTo(end);
    const partCount = 3 + Math.ceil(distance * 3);
    let lineY = distance * 0.3;
    lineY = Math.max(lineY, start.y * 2);
    const v1 = new THREE.Vector3(
      (2 * from.x + to.x) / 3,
      lineY,
      (2 * from.z + to.z) / 3,
    );
    const v2 = new THREE.Vector3(
      (2 * to.x + from.x) / 3,
      lineY,
      (2 * to.z + from.z) / 3,
    );

    const curve = new THREE.CubicBezierCurve3(start, v1, v2, end);
    const allPoints = curve.getPoints(partCount * 5);

    const colors: number[] = [];
    let i = 0;
    while (i < allPoints.length) {
      colors.push(this.lineBaseColor.r, this.lineBaseColor.g, this.lineBaseColor.b, 1);
      i++;
    }
    const geometry = new THREE.BufferGeometry().setFromPoints(allPoints);
    geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 4));
    const mesh = new THREE.Line(geometry, meteorMaterial);
    group.add(mesh);

    return group;
  };
msforest commented 1 year ago

三维坐标转屏幕坐标


axis2Screen: (modelPos: THREE.Vector3, camera, dom) => {
    const point2 = modelPos.clone().project(camera); // 场景坐标转设备坐标

    // 设备坐标转屏幕坐标
    const halfWidth = dom.offsetWidth / 2;
    const halfHeight = dom.offsetHeight / 2;
    const point3 = new THREE.Vector3(0, 0, 0);
    point3.x = Math.round(point2.x * halfWidth + halfWidth);
    point3.y = Math.round(-point2.y * halfHeight + halfHeight);
    return point3;
  }