使用自定義動畫功能從object.matrix.setrotationfromeuler旋轉對象

第一篇文章在這裏..我不知道如何搜索這個主題，因爲我認爲它非常深奧。我會在解釋後發佈代碼。使用自定義動畫功能從object.matrix.setrotationfromeuler旋轉對象

我創建了一個自定義動畫函數，它可以用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/

來源

2012-07-20 Recur

是否有原因，你每次刪除矩形而不是僅僅移動它？ – 2012-07-21 00:38:09

那麼我也需要改變矩形的寬度。我試過flatrect.scale.set = x;但它不起作用。實際上，我已經想出了另一種方法，只需輸出相機的位置和旋轉角度，而將相機移動到正確的位置並將其初始化到該位置即可。但問題是，當它控制。更新它移動Z旋轉軸，因此它弄亂了初始相機視圖。我會編輯我的帖子以反映這個新問題。 – Recur 2012-07-22 02:06:58

我已經想通了：

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-07 17:46:26 Recur

使用自定義動畫功能從object.matrix.setrotationfromeuler旋轉對象

回答

相關問題