My code creates a perfect cube, but I am struggling to make it rotate on button click. For example, when the front button is clicked, I want the cube to show its front side just like the other buttons.
I have researched extensively but have not found a solution yet.
Can anyone please help me with this?
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>