360°地球鼠標threejs

我想用鼠標在360°移動地球，但沒有任何反應。

但是，我希望世界是固定的，當我使用鼠標旋轉360時不會移動。

等待迴應。

<!DOCTYPE html>

<meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 
    <style> 
     body { 
      color: #808080; 
      font-family:Monospace; 
      font-size:13px; 
      text-align:center; 

      background-color: #000000; 
      margin: 0px; 
      overflow: hidden; 
     } 

     #info { 
      position: absolute; 
      top: 0px; width: 100%; 
      padding: 5px; 
     } 

     a { 

      color: #0080ff; 
     } 

    </style> 
</head> 
<body> 

    <div id="container"></div> 
    <div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - earth demo</div> 

    <script src="../build/three.min.js"></script> 
    <script src="js/libs/stats.min.js"></script> 

    <script> 

     var container, stats; 
     var camera, scene, renderer; 
     var group; 
     var mouseX = 0, mouseY = 0; 


     init(); 
     animate(); 

     function init() { 

      container = document.getElementById('container'); 

      camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000); 
      camera.position.z = 900; 

      scene = new THREE.Scene(); 

      group = new THREE.Object3D(); 
      scene.add(group); 

      // earth 

      var earthTexture = new THREE.Texture(); 
      var loader = new THREE.ImageLoader(); 

      loader.addEventListener('load', function (event) { 

       earthTexture.image = event.content; 
       earthTexture.needsUpdate = true; 

      }); 

      loader.load('textures/1.jpg'); 

      var geometry = new THREE.SphereGeometry(250, 55, 55); 
      var material = new THREE.MeshBasicMaterial({ map: earthTexture, overdraw: true }); 

      var mesh = new THREE.Mesh(geometry, material); 
      group.add(mesh); 

      // shadow 

      var canvas = document.createElement('canvas'); 
      canvas.width = 128; 
      canvas.height = 128; 

      var context = canvas.getContext('2d'); 
      var gradient = context.createRadialGradient(canvas.width/2, canvas.height/2, 0, canvas.width/2, canvas.height/2, canvas.width/2); 
      gradient.addColorStop(0.1, 'rgba(210,210,210,1)'); 
      gradient.addColorStop(1, 'rgba(255,255,255,1)'); 

      context.fillStyle = gradient; 
      context.fillRect(0, 0, canvas.width, canvas.height); 

      var texture = new THREE.Texture(canvas); 
      texture.needsUpdate = true; 

      var geometry = new THREE.PlaneGeometry(300, 300, 3, 3); 
      var material = new THREE.MeshBasicMaterial({ map: texture, overdraw: true }); 



      renderer = new THREE.CanvasRenderer(); 
      renderer.setSize(window.innerWidth, window.innerHeight); 

      container.appendChild(renderer.domElement); 

      stats = new Stats(); 
      stats.domElement.style.position = 'absolute'; 
      stats.domElement.style.top = '0px'; 
      container.appendChild(stats.domElement); 

      document.addEventListener('mousemove', onDocumentMouseMove, false); 

      // 

      window.addEventListener('resize', onWindowResize, false); 

     } 

     function onWindowResize() { 

      windowHalfX = window.innerWidth/2; 
      windowHalfY = window.innerHeight/2; 

      camera.aspect = window.innerWidth/window.innerHeight; 
      camera.updateProjectionMatrix(); 

      renderer.setSize(window.innerWidth, window.innerHeight); 

     } 

     function onDocumentMouseMove(event) { 

      mouseX = (event.clientX - windowHalfX); 
      mouseY = (event.clientY - windowHalfY); 



     } 

     // 

     function animate() { 

      requestAnimationFrame(animate); 

      render(); 
      stats.update(); 

     } 

     function render() { 

      camera.position.x += (mouseX - camera.position.x) * 0.50; 
      camera.position.y += (- mouseY - camera.position.y) * 0.50; 
      camera.lookAt(scene.position); 

      group.rotation.y -= 0.01; 

      renderer.render(scene, camera); 



     } 
    // add subtle ambient lighting 
    var ambientLight = new THREE.AmbientLight(0x555555); 
    scene.add(ambientLight); 


    </script> 

</body>

來源

2013-01-24 Mickael Dll

我真的不明白你想要什麼。請再擴展你的問題。 –

，您有問題是，你只移動相機在X和Y方向上，當照相機是3D實體。

爲了完成旋轉，您需要從3D球面座標（如緯度，經度，高度，假設恆定高度，您可以將X分配爲經度，Y分配爲緯度）移動鼠標座標。

然後指定3D直角座標系到相機：

的公式（取代你在你的渲染功能）：

（假設海拔高度爲960，這與你的模型作品）

camera.position.x = 960 * Math.sin(mouseX) * Math.cos(mouseY); 
camera.position.y = 960 * Math.sin(mouseX) * Math.sin(mouseY); 
camera.position.z = 960 * Math.cos(mouseX);

下一個需要注意的是，正弦和餘弦採取弧度（範圍-pi到pi（-3.14159 3.14159）...所以你需要將你onDocumentMouseMove活動調整爲類似

mouseX = -Math.PI + (event.clientX)/(windowHalfX*2)*Math.PI*2; 
mouseY = -Math.PI + (event.clientY)/(windowHalfY*2)*Math.PI*2;

這將導致鼠標在緯度/長度座標上運行（如果您正在查看世界的頂部，這仍然有點奇怪。你可以限制mouseY = 0，那麼X旋轉總是在赤道上。

如果您想將鼠標移動到移動框架上，而不是顯示的地球中心框架上，則數學更復雜一些。但這至少應該是一個開始。

來源

2013-01-24 22:42:56

three.js還支持軌跡球相機。我並不熟悉它，但有一個示例在此處使用它：http://threejsdoc.appspot.com/doc/three.js/examples/misc_camera_trackball.html –

appspot上的示例已有一年了。請參閱官方three.js示例：http://mrdoob.github.com/three.js/examples/misc_controls_trackball.html – WestLangley

360°地球鼠標threejs

回答

相關問題