Question

我有一个问题。

我想用鼠标将地球移动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>

Answer 1

您遇到的问题是，当相机是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旋转将始终在赤道。

如果您希望将鼠标移动到移动的帧上，而不是我已经显示的以地球为中心的帧，则数学会稍微复杂一些。但这至少应该是一个开始。

360°地球与鼠标threejs

1 个答案: