我如何旋转立方体按钮点击three.js？

Question

这是我的代码...立方体是完美的，但我希望旋转按钮点击 例如，当我点击前面按钮时，立方体将显示与其他按钮相同的正面 我做了很多研究，但我找不到任何解决方案 请有人可以帮助我..

var scene, camera, renderer, cube;
    
    init();
    //drag();
    
    function init() {
    
        // renderer
        var container = document.getElementById("container");
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor ('#fff', 1);
        container.appendChild(renderer.domElement);
    
    
        // camera
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    	camera.position.x = 50;
    	camera.position.y = 50;
    	camera.position.z = 800;
    
        //cube
         var geometry = new THREE.BoxBufferGeometry(250, 350, 100,1,1,1);
    	 var cubeMaterial = new THREE.MeshLambertMaterial({color:"red"});
    
        cube = new THREE.Mesh(geometry, cubeMaterial);
        //cube.doubleSided = true;
    
        cube.rotation.x = Math.PI / 1.5;
        cube.rotation.y = Math.PI / 1;
        // scene
        scene = new THREE.Scene();
        scene.add(cube);
    
        // add subtle ambient lighting
        var ambientLight = new THREE.AmbientLight(0x888888);
        scene.add(ambientLight);
    
        // directional lighting
        var directionalLight = new THREE.DirectionalLight(0x666666);
        directionalLight.position.set(1, 1, 1).normalize();
        scene.add(directionalLight);
    
       
        function render() {
            renderer.render(scene, camera);
            //requestAnimFrame(render);
            requestAnimationFrame(render);
        }
    
        render();
    }

body {
margin: 0px;
}
#container {
width: 100%;
height: 100%;
}

<script src="https://rawgit.com/mrdoob/three.js/r86/build/three.min.js"></script>

<div id="container"></div>

Answer 1

您已经拥有进行一些轮换的代码：

cube.rotation.x = Math.PI / 1.5;
cube.rotation.y = Math.PI / 1;

为自己制作一组功能，将对象旋转到所需的角度，然后在按钮上调用它们。点击。