3つのアニメーションベジエ曲線

パフォーマンスを念頭に置いて、3Dでの文字列の動きをシミュレートするために、曲線の点のアニメーションを実装する方法を知る必要があります。

例えば2点間の複数の文字列。

Fiddleが提供されます。 （更新されたコード）

は、だから私は、curveObjectを持っていると私はPOINT1の位置を変更しようとしています。 （コード更新）

  var camera, scene, renderer; 
    var angle1 = angle2 = 0; 
    var curve1, point1, curveObject, geometryCurve, materialCurve; 
    var params1 = {P0x: 0, P0y: 0, 
       P1x: 2, P1y: 2, 
       P2x: -2, P2y: 1, 
       P3x: 0, P3y: 3, 
       steps: 30}; 

    scene = new THREE.Scene(); 
    camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 10000); 
    camera.position.z = 10; 
    scene.add(camera); 
    renderer = new THREE.WebGLRenderer({ antialias: true }); 
    renderer.setClearColor(0x16112b, 1); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.body.appendChild(renderer.domElement); 

    createBezierCurveNEW = function (cpList, steps) { 

    var N = Math.round(steps)+1 || 20; 

    var geometry = new THREE.Geometry(); 
    var curve = new THREE.CubicBezierCurve3(); 

    var cp = cpList[0]; 
    curve.v0 = new THREE.Vector3(cp[0], cp[1], cp[2]); 
    cp = cpList[1]; 
    curve.v1 = new THREE.Vector3(cp[0], cp[1], cp[2]); 
    cp = cpList[2]; 
    curve.v2 = new THREE.Vector3(cp[0], cp[1], cp[2]); 
    cp = cpList[3]; 
    curve.v3 = new THREE.Vector3(cp[0], cp[1], cp[2]); 

    var j, stepSize = 1/(N-1); 
    for (j = 0; j < N; j++) { 
     geometry.vertices.push(curve.getPoint(j * stepSize)); 
    } 
    return geometry; 
    }; 


    function CreateCurve(){ 
    scene.remove(curve1); 
    var controlPoints1 = [ 
     [params1.P0x, params1.P0y, 0], 
     [params1.P1x, params1.P1y, 0], 
     [params1.P2x, params1.P2y, 0], 
     [params1.P3x, params1.P3y, 0] ]; 
    var curveGeom1 = createBezierCurveNEW(controlPoints1, params1.steps); 
    var mat = new THREE.LineBasicMaterial({ color: 0x000000, linewidth: 5 }); 
    curve1 = new THREE.Line(curveGeom1, mat); 
    scene.add(curve1); 
    }; 
    CreateCurve(); 


    function animate() { 
     CreateCurve(); 
     render(); 
     angle1 -= .007; 
     angle2 += .003; 
     params1.P1x = Math.cos(angle1)+2; 
     params1.P1y = Math.sin(angle1)+3; 
     params1.P2x = -Math.cos(angle2)-2; 
     params1.P2y = Math.cos(angle2)+1; 
     requestAnimationFrame(animate); 
    }; 
    animate(); 

    function render() { 
     renderer.render(scene, camera); 
    };

私は価値コンソールの増加、が、実際の視覚的なフィードバックを参照してください。私の推測 - 私は何とかカーブを更新する必要があります。

最後の目標は、曲線のゆっくりとした正弦的な動きを滑らかにアニメートすることです。ベジェ曲線の制御点のようながPhotoshopで移動されています。

（目標が達成された。悲しいことではない私自身のことで。私はこれらの人にhttp://cs.wellesley.edu/~cs307/lectures/15.shtmlのでBIGおかげで、いくつかのヘルパーコードlibにつまずいてきました。）

threejsの曲線アニメーションについてはほとんど情報があります。

誰かが既に類似しているかもしれません。

出典

2016-12-21 Serge Nikolaev

http://threejs.org/examples/webgl_physics_rope。 html – WestLangley

出典

2016-12-27 09:36:40

3つのアニメーションベジエ曲線

答えて

関連する問題