Question

我从github下载了一个代码，想要修改它。我需要修改这段代码，用箭头键不是通过冥想来通过键盘移动地球。如何修改代码。坦克为你提供帮助。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js canvas - geometry - earth</title>
        <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: #ffffff;
                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;


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


            init();
            animate();


            function init() {


                container = document.getElementById( 'container' );


                camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
                camera.position.z = 500;


                scene = new THREE.Scene();


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


                // earth


                var loader = new THREE.TextureLoader();
                loader.load( 'textures/land_ocean_ice_cloud_2048.jpg', function ( texture ) {


                    var geometry = new THREE.SphereGeometry( 200, 20, 20 );


                    var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
                    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: 0.5 } );


                var mesh = new THREE.Mesh( geometry, material );
                mesh.position.y = - 250;
                mesh.rotation.x = - Math.PI / 2;
                group.add( mesh );


                renderer = new THREE.CanvasRenderer();
                renderer.setClearColor( 0xffffff );
                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.05;
                camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
                camera.lookAt( scene.position );


                group.rotation.y -= 0.005;


                renderer.render( scene, camera );


            }




        </script>


    </body>
</html>

抱歉我的英语。坦克很多。

Answer 1

在init（）函数中添加这些

window.addEventListener ('keydown', onKeyDown,      false);
window.addEventListener ("keyup",   onKeyUp,        false);

然后实现代码：

function onKeyDown (event)
{
    switch (event.keyCode)
    {
        case 16: /* shift */    isShiftDown = true; break;

        fill the rest accordingly 
    }
}

如何修改这个Three.js文件

1 个答案: