如何減慢javascript中對象的手動控制旋轉？

在標題中，有人可以幫助我如何減慢在JavaScript中的3D對象的鼠標控制旋轉？旋轉過於敏感，難以手動控制。這裏是我有的代碼：如何減慢javascript中對象的手動控制旋轉？

<html> 
<head> 
<script src="js/three.js"></script> 
<script src="js/ColladaLoader.js"></script> 
<script src="js/OrbitControls.js"></script></head> 
<body> 
<script> 
    // Set up the scene, camera, and renderer as global variables. 
    var scene, camera, renderer, mesh; 

    init(); 
    animate(); 

// Sets up the scene. 
    function init() { 

    // Create the scene and set the scene size. 
    scene = new THREE.Scene(); 
    scene.add(new THREE.AmbientLight(0x999999)); 
    var WIDTH = window.innerWidth, 
     HEIGHT = window.innerHeight; 

// Create a renderer and add it to the DOM. 
    renderer = new THREE.WebGLRenderer({antialias:true}); 
    renderer.setSize(WIDTH, HEIGHT); 
    document.body.appendChild(renderer.domElement); 


// Create a camera, zoom it out from the model a bit, and add it to the scene. 
    camera = new THREE.PerspectiveCamera(45, WIDTH/HEIGHT,1,1000); 
    camera.position.z = 100; 
    scene.add(camera); 


// Create an event listener that resizes the renderer with the browser window. 
    window.addEventListener('resize', function() { 
     var WIDTH = window.innerWidth, 
      HEIGHT = window.innerHeight; 
     renderer.setSize(WIDTH, HEIGHT); 
     camera.aspect = WIDTH/HEIGHT; 
     camera.updateProjectionMatrix(); 
    }); 

// Set the background color of the scene. 
    renderer.setClearColor(0x333F47, 1); 

    // Create a light, set its position, and add it to the scene. 
    var pointLight = new THREE.PointLight(0xffffff, 0.6); 
    pointLight.position.set(80,90,150); 
    scene.add(pointLight); 


// Load in the mesh and add it to the scene. 
    var loader = new THREE.ColladaLoader(); 
    loader.options.convertUpAxis = true; 
    loader.load("models/water.dae", function(result){ 
     //geometry.computeBoundingBox(); 
     //var material = new THREE.MeshLambertMaterial; 
     //mesh = new THREE.Mesh(geometry, material); 
     result.scene.scale.x = .01; 
     result.scene.scale.y = .01; 
     result.scene.scale.z = .01; 
     result.scene.position.z = 20; // We are looking towards negative z axis in openGL (right hand coordinate in world space), -z axis goes inside screen but since we placed camera position to be at z = 100, we can place on positive z-axis 
     result.scene.updateMatrix(); 
     result.scene.matrixAutoUpdate = false; 
     scene.add(result.scene); 
    }); 


// Add OrbitControls so that we can pan around with the mouse. 
    controls = new THREE.OrbitControls(camera, renderer.domElement); 
    controls.enableDamping = true; 
    controls.dampingFactor = 0.25; 
    controls.enableZoom = true; 
    controls.target.z = 20; 

    } 


// Renders the scene and updates the render as needed. 
    function animate() { 

    // Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ 
    requestAnimationFrame(animate); 

    // Render the scene. 
    renderer.render(scene, camera); 
    controls.update(); 

    } 
</script> 
</body> 
</html>

我欣賞任何意見/建議。

來源

2016-12-23 Mirek

你的問題不是關於Java3D API，請不要濫用這個標籤。 – gouessej

@gouessej這是他們的第一篇文章。與其指責他們濫用權力，您可能想禮貌地解釋爲什麼標籤在這裏不合適。如果在標籤系統中鍵入「3d」，則標籤是最高響應之一。一位新用戶可能很容易犯錯，而不是像您所建議的那樣進行濫用。 – JonSG

JavaScript和Java是兩種截然不同的編程語言。 Three.js和Java3D是兩個截然不同的API。由於原始的海報使用了「javascript」標籤，他知道Three.js是一個JavaScript API而不是Java API。 – gouessej

我不完全確定你說的「減慢」鼠標移動的意思，因爲你說它太敏感了。旋轉速度是否比它應該更快，或者它只是快速跟隨鼠標？

要減慢鼠標控制的旋轉速度，您可以使用緩動方程使其更平滑，如果這就是您要求的。其中我發現經常使用（對於2D即是）我自己是這樣的：

rotation += (targetRotation - rotation)/speed;

所以，如果我想要一個對象以緩慢的速度向我的鼠標旋轉，我會寫：

object.rotation += (mouseRotation - object.rotation)/15;

我相信你可以適應這個3d系統。

來源

2016-12-23 04:13:10 Flizzet

Flizzet，非常感謝。確實是的。當您在屏幕上拖動和旋轉3D模型時，我的意思是減慢鼠標控制旋轉。 – Mirek

如何減慢javascript中對象的手動控制旋轉？

回答

相關問題