Question

我使用three.js在其上贴有地球纹理的球体。尽管地球自行（水平）绕y轴旋转，但我不确定如何根据鼠标位置沿垂直x轴旋转球体。当鼠标位于浏览器窗口顶部时，地球应显示北极；当鼠标位于屏幕底部时，地球应显示北极。当鼠标在浏览器窗口内垂直移动时，它应该旋转以根据鼠标的垂直位置显示两极之间的地球。

如何完成这种轮换？

此代码设置了three.js场景，但是旋转的数学并不完全正确：

<html>
    <head>
        <title>Earth Rotation</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/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 geometry   = new THREE.SphereGeometry(1, 100, 100);
            var material  = new THREE.MeshPhongMaterial();
            var earthMesh = new THREE.Mesh(geometry, material);

            material.map = THREE.ImageUtils.loadTexture('images/earth.jpg');

            var light = new THREE.AmbientLight( 0xcccccc );
            scene.add(light);
            scene.add(earthMesh);

            camera.position.z = 1.5;

            document.addEventListener('mousemove', function(event){
                if(event.clientY < window.innerHeight / 2) {
                    earthMesh.rotation.x = ((window.innerHeight / 2) - (event.clientY * .0001));
                } else if(event.clientY > window.innerHeight / 2) {
                    earthMesh.rotation.x = ((window.innerHeight / 2) + (event.clientY * .0001));
                }
            }, false)

            var animate = function () {
                requestAnimationFrame( animate );
                earthMesh.rotation.y -= 0.0005;
                renderer.render( scene, camera );
            };

            animate();
        </script>
    </body>
</html>

Answer 1

可能，您可以使用THREE.OrbtiControls()进行一些修改来实现相同的目的。

将摄像机移到旋转的地球仪上只是一种选择。

r96

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 10;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var globe = new THREE.Mesh(new THREE.SphereGeometry(4, 32, 16), new THREE.MeshBasicMaterial({
  map: new THREE.TextureLoader().load("https://c1.staticflickr.com/3/2521/3884071286_edb50f8137_b.jpg")
}));
scene.add(globe);

window.addEventListener("mousemove", onMouseMove, false);

function onMouseMove(event) {
  camera.position.setFromSphericalCoords(10, Math.PI * -event.clientY / window.innerHeight, 0);
  camera.lookAt(globe.position);
}

render();

function render() {
  requestAnimationFrame(render);
  globe.rotation.y -= 0.005;
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>

根据three.js中的鼠标位置旋转球体x轴

1 个答案: