Повернуть сферу х оси на основе положения мыши в three.js - PullRequest
Новая
       7

Повернуть сферу х оси на основе положения мыши в three.js

0 голосов
/ 28 сентября 2018

У меня есть сфера с текстурой земли, использующая 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>

1 Ответ

0 голосов
/ 29 сентября 2018

Возможно, вы можете добиться того же, используя 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>
...