javascript - 我想在three.js中选择和旋转一个带有键盘输入的节点

问题描述

在这里，我在场景图中有两个立方体（节点），我希望能够通过按“a”来选择一个节点，通过按键盘上的“d”来选择另一个节点，并且我还希望节点的颜色选中时变为黄色，然后按上/下箭头键旋转选中的节点。我是three.js 的新手，所以我不知道我在哪里做错了。

<html>
<head>
    <title>My first three.js app</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
    <script src="js/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.BoxGeometry( 1, 1, 1 );
        var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        var cube = new THREE.Mesh( geometry, material );
        scene.add( cube );

        var geometry = new THREE.BoxGeometry( 1, 1, 1 );
        var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        var secondCube = new THREE.Mesh( geometry, material );
        scene.add( secondCube );

        camera.position.z = 5;

        var color = new THREE.MeashBasicMaterial( {color: 0xfff00} );        
        document.addEventListener("keydown", onDocumentKeyDown, false);
        function onDocumentKeyDown(event) {
            var keyCode = event.which;
            if (keyCode == 87)  {      //"a"
                if (keyCode == 38) {    //"Arrow Up" 
                    cube.material = color;
                    var animate = function () {
                        requestAnimationFrame( animate );
                        cube.rotation.x += 0.01;}
                        animate();
                 }
                            else {
                              cube.material = color;}
                      }
                else if (keyCode == 83)  {    //"d"
                    if (keyCode == 40)  {     //"Arrow Down"
                        secondCube.material = color;
                        var animate = function() {
                            requestAnimationFrame (animate);
                            secondCube.rotation.x += 0.01};
                            animate();
                     }
                            else {
                                secondCube.material= color;};
                   };


            renderer.render( scene, camera );


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

标签： javascriptthree.js

javascript - 我想在three.js中选择和旋转一个带有键盘输入的节点

问题描述

解决方案

推荐阅读