コンピュータグラフィクスb

第9章 アニメーション、カメラの移動



基本的なアニメーション

chapter-09/01-basic-animation.html (p.249) text, run


オブジェクトを選択する

rayとオブジェクトの交点を求める

        function onDocumentMouseDown(event) {

            var vector = new THREE.Vector3(( event.clientX / window.innerWidth ) * 2 - 1, -( event.clientY / window.innerHeight ) * 2 + 1, 0.5);
            vector = vector.unproject(camera);

            var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());

            var intersects = raycaster.intersectObjects([sphere, cylinder, cube]);

            if (intersects.length > 0) {

                console.log(intersects[0]);

                intersects[0].object.material.transparent = true;
                intersects[0].object.material.opacity = 0.1;
            }
        }
      

chapter-09/02-selecting-objects.html (p.252) text, run, diff


Tween.jsを用いたアニメーション

補間によるアニメーション

    77	
    78	        // create a tween
    79	        // http://sole.github.io/tween.js/examples/03_graphs.html
    80	        var posSrc = {pos: 1};
    81	        var tween = new TWEEN.Tween(posSrc).to({pos: 0}, 5000);
    82	        tween.easing(TWEEN.Easing.Sinusoidal.InOut);
    83	
    84	        var tweenBack = new TWEEN.Tween(posSrc).to({pos: 1}, 5000);
    85	        tweenBack.easing(TWEEN.Easing.Sinusoidal.InOut);
    86	
    87	        tween.chain(tweenBack);
    88	        tweenBack.chain(tween);
    89	
    90	
    91	        var onUpdate = function () {
    92	            var count = 0;
    93	            var pos = this.pos;
    94	
    95	            loadedGeometry.vertices.forEach(function (e) {
    96	                var newY = ((e.y + 3.22544) * pos) - 3.22544;
    97	                pointCloud.geometry.vertices[count++].set(e.x, newY, e.z);
    98	            });
    99	
   100	            pointCloud.sortParticles = true;
   101	        };
   102	
   103	        tween.onUpdate(onUpdate);
   104	        tweenBack.onUpdate(onUpdate);

(略)

   157	        function render() {
   158	            stats.update();
   159	            TWEEN.update();
   160	            requestAnimationFrame(render);
   161	            webGLRenderer.render(scene, camera);
   162	        }
      

chapter-09/03-animation-tween.html (p.253) text, run, diff


カメラの移動(トラックボール)

カメラをコントロールする
    64	        var trackballControls = new THREE.TrackballControls(camera);
    65	
    66	        trackballControls.rotateSpeed = 1.0;
    67	        trackballControls.zoomSpeed = 1.0;
    68	        trackballControls.panSpeed = 1.0;
    69	//        trackballControls.noZoom=false;
    70	//        trackballControls.noPan=false;
    71	        trackballControls.staticMoving = true;
    72	//        trackballControls.dynamicDampingFactor=0.3;

chapter-09/04-trackball-controls-camera.html (p.258) text, run, diff


カメラの移動(fly control)

chapter-09/05-fly-controls-camera.html (p.259) text, run, diff


カメラの移動 (roll control)

chapter-09/06-roll-controls-camera.html (p.261) text, run, diff


カメラの移動 (第一人称, First Person)

chapter-09/07-first-person-camera.html (p.262) text, run, diff


カメラの移動 (Orbit Control)

chapter-09/08-controls-orbit.html (p.252) text, run, diff



コンピュータ・グラフィックスb 課題9


作成したプログラムが正しく動作することを確認したら、それぞれの 提出先に提出しなさい。 提出した後は、正しく提出されていることを http://ynitta.com/class/cg2/local/handin/ で必ず確認しておいて下さい。 提出〆切は次回の講義日の 8:30 a.m. です。

課題9a: カメラ・コントロール を使ったシーンを作る

提出ファイルkadai9a.html
コメント欄:どのようなシーンであるか説明を書きなさい。
提出先: 「宿題提出Web:コンピュータ・グラフィックスb:課題9a」 http://ynitta.com/class/cg2/local/handin/up.php?id=kadai9a

以前作成した kadai6a.html をコピーして kadai9a.html をつくり、それを変更して、カメラを First Person で移動できるようにしなさい。 chapter-09/07-first-person-camera.html を参考にすること。

提出条件