Three.jsがクリックで回転を変更する

ボタンをクリックするとオブジェクトのアニメーション回転を変更/開始します。私は、レンダリング関数が無限ループであり、cylinder.rotation.x + = 0.1が角度を加算して物を丸くすることを理解しています。私はボタンを使用してこのパラメータの開始を変更したい。これまでは、ボタンをクリックしている間だけ、回転に一度追加することができました。たぶん、実施例では、より良い説明します：Three.jsがクリックで回転を変更する

<html> 
    <head> 
     <title>3D Cube</title> 
     <style> 

      canvas { width: 100%; 
      height: 100% } 
      </style> 
    </head> 
    <body> 
     <script src="three.js"></script> 
     <script> 

      var scene = new THREE.Scene(); 
      var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 

      var renderer = new THREE.WebGLRenderer(); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      document.body.appendChild(renderer.domElement); 

      var cylindergeometry = new THREE.CylinderGeometry(0.1, 0.1, 2, 50, false); 
      var cylindermaterial = new THREE.MeshLambertMaterial({wireframe: true, color: 0x000000}); 
      var cylinder = new THREE.Mesh(cylindergeometry, cylindermaterial); 
      cylinder.position.set(0,0,0); 
      scene.add(cylinder); 

      camera.position.z = 5; 

      var render = function() { 
       requestAnimationFrame(render); 

       cylinder.rotation.x = 0.1; 

       renderer.render(scene, camera); 
      }; 

      render(); 
      var btn = document.createElement("BUTTON"); 
      var t = document.createTextNode("CLICK ME");  
      btn.appendChild(t);  
      document.body.appendChild(btn); 


      btn.onclick=function(){ 
       // start animation 
       // change cylinder.rotation.x = 0.1; to cylinder.rotation.x += 0.1; 
      }; 
     </script> 

    </body> 
</html>

出典

2016-10-11 gimba

だけonclick内render()を移動します。

var render = function() { 
    requestAnimationFrame(render); 

    cylinder.rotation.x += 0.1; 

    renderer.render(scene, camera); 
}; 

btn.onclick = function() { 
    render(); 
};

これはあなたの特定の問題では機能しますが、もっと複雑なロジックを実行したい場合は、おそらく良い解決策ではありません。

/* global render function */ 
var render = function() { 
    requestAnimationFrame(render); 
    renderer.render(scene, camera); 
}; 
render(); 

/* cylinder rotation logic */ 
var rotateCylinder = function() { 
    requestAnimationFrame(rotateCylinder); 
    cylinder.rotation.x += 0.1; 
}; 

/* start the rotation */ 
btn.onclick = function() { 
    rotateCylinder(); 
};

これは完全に私の頭の上からであり、その独自の欠点を持っているかもしれません。その代わりに、あなたはこのような何かにレンダリングとシリンダーロジックを分離できます。

出典

2016-10-11 17:59:04 McScott

変数内の値を "0.1"にし、その変数をonclickコールバック内で変更します。実際には、その変数をゼロとして開始します。次に、ボタンのコールバック内で0.1に増加します。

... 
camera.position.z = 5; 

var rotationAmount = 0.0; // initial value is zero so it starts not rotating. 

var render = function() { 
    requestAnimationFrame(render); 

    // make 0.1 a variable and increment the rotation, by that variable, between every frame. 
    cylinder.rotation.x += rotationAmount; // starts without any rotation. even though "+=" is there. 
    // without "+=" your object won't rotate as frames change. it would stand still in a 0.1 angle, frame after frame. 

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

あなたのonclickコールバック。最初にボタンをクリックするとアニメーションが開始されます。

... 
btn.onclick=function(){ 
    // start animation 
    // change cylinder.rotation.x = 0.1; to cylinder.rotation.x += 0.1; 

    // changing variable inside onclick callback. 
    rotationAmount += 0.1 // every click on that button will make rotation faster. it started at zero, first click will put it to 0.1. 
    // or add any other logic you can imagine using this button. 
    if (rotationAtmount > 0.1) 
     rotationAtmount = 0 // 1 click starts, 1 click stops. 
}; 
...

出典

2016-10-11 18:01:11 Cassiohg

Three.jsがクリックで回転を変更する

答えて

関連する問題