2017-06-11 9 views
0

私は立方体を持つシンプルなシーンを持っています。 Orbitontrolsが使用され、スムーズな回転のための減衰が可能になりました。 tween.jsを使用してボタンをクリックすると、カメラを新しい位置にアニメートする関数を作成しました。しかし、ダンピングは、カメラがアニメーション化されるたびに減少しているようです。ここでtween.jsを使用するとオービットコントロールの減衰が影響を受けます

は私のコードは

var container; 


var camera, scene, renderer; 
    var controls; 
    var cube; 
    init(); 
    animate(); 
    function init() { 
    container = document.getElementById('webgl_div'); 

    camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 2000); 
    camera.position.z = 500; 
    camera.position.y = 0; 
    camera.position.x = 0; 

    scene = new THREE.Scene(); 

    cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), new THREE.MeshNormalMaterial()); 
    scene.add(cube); 

    var ambient = new THREE.AmbientLight(0x101030); 
    scene.add(ambient); 

    renderer = new THREE.WebGLRenderer(); 
    renderer.setPixelRatio(window.devicePixelRatio); 
    renderer.setSize(window.innerWidth/1.2, window.innerHeight/1.2); 
    controls = new THREE.OrbitControls(camera, renderer.domElement); 
    controls.enableDamping = true; 
    controls.dampingFactor = 0.05; 
    controls.enableZoom = true; 
    controls.rotateSpeed = .1; 
    container.appendChild(renderer.domElement); 
    } 
    function animate() { 
    requestAnimationFrame(animate); 
    controls.update(); 
    TWEEN.update(); 
    render(); 
    } 
    function render() { 
    renderer.render(scene, camera); 
    } 
    function rotate_camera() { 
    var tween = new TWEEN.Tween(camera.position) 
    .to({ x: 0, y: 0, z: 600 }, 1000) 
    .start(); 
    animate(); 
    } 

のHTMLコード:

<div class="row"> 
     <div class="col-md-10" id="webgl_div"> 
     </div> 
     <div class="col-md-2"> 
      <div class="row"> 
      <div class="col-md-12"> 
       <button type="button" id="rotate_camera_btn">Rotate Camera</button> 
      </div> 
      </div> 
     </div> 
     </div> 

ボタンのクリックイベント(jqueryの)

$("#rotate_camera_btn").click(function(){ 
     rotate_camera(); 
    }) 

どのようにこれを是正することができますか?それともパフォーマンスの問題ですか?私はなぜそれが起こっているのか理解できません!

答えて

0

問題は私がをrotate_camera()に呼んでいたことです。これによりシーンが遅くなりました。それを削除し、すべて正常に動作します

関連する問題