1

我有个问题 。

我想用鼠标 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>

4

1 回答 1

2

您遇到的问题是，当相机是 3D 实体时，您只能在 X 和 Y 方向移动相机。

为了进行旋转，您需要将鼠标坐标从 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);

下一个警告是 sin 和 cos 采用弧度（范围从 -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-24T22:42:56.567 回答