我如何在三个.js 中单击按钮旋转立方体？答案

【问题标题】：how i rotate cube on button click in three.js?我如何在三个.js 中单击按钮旋转立方体？
【发布时间】：2017-08-06 11:16:35
【问题描述】：

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

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>

【问题讨论】：

标签： javascript three.js

【解决方案1】：

您已经有代码可以进行一些轮换：

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

为自己创建一组函数，将对象旋转到所需的角度，并在单击按钮时调用它们。

【讨论】：