Question

我有一个在中心对象（中心对象v3：0,0,0）周围有6个对象的场景。相机放置在一个物体的后面和上方，并正对着中心。

我已经使用CubicBezierCurve3绘制了一条曲线，从摄像机的现有位置（一个对象的上方和下方）朝向另一个“单击”的对象，并在与之前相同的相对位置（在“单击”的对象上方和下方）结束并朝中心看。

当前工作正常，但是我受命使用2条贝塞尔曲线来绘制相机的运动，其中第一条曲线的端点被共享为第二条曲线的起点。要创建平滑的连接，bez1的第二个控制点和bez2的第一个控制点必须在相反的方向上具有相等的角度和距离。

我将bez1-c2的方向指向bez1-end，并假设我可以将其乘以将bez2-c1弹出到相反的位置，但是会折断成一个小角度...

有人做过此事还是可以将我引导到某个地方寻求帮助/示例？

谢谢

编辑：

    const objectVector = this.lastClickedObjectPos.clone();

    const bezier1StartPoint = this._camera.position.clone();

    const dirFromSunToCamera = new Vector3(0, 0, 0).sub(bezier1StartPoint);
    const distanceFromSunToCamera: number = new Vector3(0, 0, 0).distanceTo(bezier1StartPoint);

    const dirFromSunToObject = objectVector.clone().sub(new Vector3(0, 0, 0));
    const distanceFromSunToObject: number = new Vector3(0, 0, 0).distanceTo(objectVector);

    const bezier2EndPoint = dirFromSunToObject.normalize().multiplyScalar(distanceFromSunToObject * 2);
    bezier2EndPoint.y += bezier1StartPoint.y;

    const dirFromSunToEnd = new Vector3(0, 0, 0).sub(bezier2EndPoint);

    const bezier1ControlPoint1 = dirFromSunToCamera
        .clone()
        .normalize()
        .multiplyScalar(distanceFromSunToCamera * -0.5);

    const dirFromBez1StartToBez2End = bezier1StartPoint.clone().sub(bezier2EndPoint);

    const bezier2StartPoint = dirFromBez1StartToBez2End.clone().normalize();

    const dirFromBez1StartToBez1End = bezier1StartPoint.clone().sub(bezier1EndPoint);
    const distanceBez1StartToBez1End = bezier1StartPoint.distanceTo(bezier1EndPoint);

    const bezier1ControlPoint2 = dirFromBez1StartToBez1End
        .clone()
        .normalize()
        .multiplyScalar(distanceBez1StartToBez1End * 0.5);

    const dirFromBez1Control2ToBez1End = bezier1StartPoint.clone().sub(bezier1ControlPoint2);
    const distanceBez1Control2ToBez1End = bezier1ControlPoint2.distanceTo(bezier1EndPoint);

    const bezier2ControlPoint1 = dirFromBez1Control2ToBez1End
        .clone()
        .normalize()
        .multiplyScalar(distanceBez1Control2ToBez1End * -2);

    const bezier2ControlPoint2 = dirFromSunToEnd
        .clone()
        .normalize()
        .multiplyScalar(distanceFromSunToObject * -6);

很抱歉，如果代码很时髦，但问题出在的是bezier1ControlPoint2和bezier2ControlPoint1。场景代表太阳系类型的事物，其中太阳是“中心”，即v3（0,0,0）。

三个JS-将2个CubicBezierCurve3与平滑连接一起加入吗？

0 个答案: