1

ここに最初の投稿.. 非常に難解だと思うので、このトピックを検索する方法がわかりませんでした。説明の後にコードを投稿します。

setTimeout 関数を使用して再帰呼び出しを行うカスタム アニメーション関数を作成し、呼び出しを遅くしてアニメーションを制御できるようにしました。カスタム アニメーション関数は、円柱の内側に四角形を描画し、上に移動して、円柱内の四角形の高さに基づいて幅を変更します。

編集済み: 必要なカメラ アングルを取得する方法を理解しました。コメントを確認して確認してください。

私が今抱えている問題は、最初のカメラの位置と回転を設定し、controls.update() を実行すると、カメラを動かしていなくても、回転 z 軸が変更されることです。

ここに私のコード全体があります：

var camera, scene, renderer,
geometry, material, mesh, flatrect;
var radius = 50,
    segments = 16,
    rings = 16,
    WIDTH = 800,
    HEIGHT = 800,
    VIEW_ANGLE = 40,
    ASPECT = WIDTH / HEIGHT,
    NEAR = 1,
    FAR = 5000; 

var animation = true;
//var animatewidth = false;
var playblock=0;
var array = [.289, .342, .396, .451, .508, .568, .630, .697, .771, .857, 1], index = 0;
var myloop, myloop2;
var zcamera=1000; // How far the camera is away from the object
var mouseoncontainer=false;

var sliderx, slidery, sliderz;
function animatemain(){
    animaterect(playblock++);
    if(playblock<11)
    setTimeout(function(){animatemain()},100);
};

    $(document).ready(function(){

        $('#container').mouseenter(function(){              
            $('#container').mousedown(function(){
                mouseoncontainer = true;
            })      

        })

        $('#container').mouseleave(function(){
        mouseoncontainer=false;
        })

        init();
        animate();

        $('#stopanim').click(function(){
        animation=false;
        })

        $('#animatewidth').click(function(){
            playblock=0;
            animatemain()
        });
    });

    function init() {
        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR );
        //camera.position.z = zcamera;

        scene.add(camera);


        geometry = new THREE.CylinderGeometry(200,200,500,100);
        material = new THREE.MeshNormalMaterial({color: 0x0000ee, opacity:.5, wireframe:true});

        geometry1 = new THREE.CubeGeometry(1, 500, array[0]*400);
        material1 = new THREE.MeshNormalMaterial({color:0x000000});

        // lights up everything
        var ambientLight = new THREE.AmbientLight( 0x00ff00 );

        scene.add(ambientLight);        
        mesh = new THREE.Mesh(geometry, material);
        flatrect = new THREE.Mesh(geometry1, material1);
        flatrect.position.x=-200*Math.sqrt(1-Math.pow(array[0],2));

        controls = new THREE.TrackballControls(camera);
        controls.rotatespeed = 50.0;
        controls.zoomSpeed = 5.0;
        controls.panSpeed = 0.8;
        controls.noZoom = false;
        controls.noPan = true;
        controls.staticMoving = true;
        //controls.dynamicDampingFactor = 0.3;
        controls.keys = [65, 83, 68];           

        scene.add(mesh);
        scene.add(flatrect);
        controls.update();
        camera.position.set(224,1003,-684);
        camera.rotation.set(-2.1692,0.1824, -1.8839);
        renderer = new THREE.WebGLRenderer({ antialias: true } );
        renderer.setSize( WIDTH, HEIGHT );
        $('#container').html( renderer.domElement );
        render();
    }
        function animate(){
            window.requestAnimationFrame( animate );        

        $('#blabber').html('The x position is: '+camera.position.x+
                    '<br/>The y position is: '+camera.position.y+
                    '<br/>The z position is: '+camera.position.z+
                    '<br/>The x rotation is: '+camera.rotation.x+
                    '<br/>The y rotation is: '+camera.rotation.y+
                    '<br/>The z rotation is: '+camera.rotation.z);
        render();
        }

        function animaterect(indexed){
        scene.remove(flatrect);
        geometry1 = new THREE.CubeGeometry(1, 500, array[indexed]*400);         
        material1 = new THREE.MeshNormalMaterial({color:0x000000});
        flatrect = new THREE.Mesh(geometry1, material1);
        flatrect.position.x=-200*Math.sqrt(1-Math.pow(array[indexed],2));

        scene.add(flatrect);
        //$('#blabber').append(flatrect.scale.get);
        render();
        }

    function render() {
        if(mouseoncontainer==true)
        controls.update();
        renderer.render( scene, camera );
    }
<body>
    <div id="container" style="width:800px;height:800px;">  
    </div>
    <button id="stopanim" type="input">Stop animation</button>
    <button id="animatewidth" type="input">Animate Width</button>
    <div id="blabber">      
    </div>
</body>

編集 1: ここに jsfiddle リンクがあります。 http://jsfiddle.net/J2NEB/240/

4

1 に答える 1

0

私はそれを理解しました：

http://jsfiddle.net/J2NEB/256/

x基本的に私がしたことは、と y を中心に回転させMath.PI*2、

flatrect.position.x=-200*Math.sqrt(1-Math.pow(array[indexed],2));

に

flatrect.position.y=-200*Math.sqrt(1-Math.pow(array[indexed],2));

したがって、回転によってオブジェクトの軸が変化するため、複雑な計算を行うことなく、必要なカメラ角度を作成できます。

于 2012-08-07T17:46:26.260 に答える