Change the angle of 3D "Cube" created using Three.js

Question

I have created a 3D wire-frame cube from Three.js examples, but I want to change the angle of cube.

Currently it looks like this:
enter image description here

But I want it to look like this:
enter image description here

Here is my code:

HTML

<script src="http://www.html5canvastutorials.com/libraries/three.min.js"></script>
<div id="container"></div>

JS

// revolutions per second
var angularSpeed = 0.2; 
var lastTime = 0;

// this function is executed on each animation frame
function animate(){
    // update
    var time = (new Date()).getTime();
    var timeDiff = time - lastTime;
    var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
    cube.y += angleChange;
    lastTime = time;

    // render
    renderer.render(scene, camera);

    // request new frame
    requestAnimationFrame(function(){
        animate();
    });
}

// renderer
var container = document.getElementById("container");
var renderer = new THREE.WebGLRenderer();
renderer.setSize(container.offsetWidth, container.offsetHeight);
container.appendChild(renderer.domElement);

// camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 700;

// scene
var scene = new THREE.Scene();

// cube Length, Height, Width
var cube = new THREE.Mesh(new THREE.CubeGeometry(400, 100, 200), new THREE.MeshBasicMaterial({
    wireframe: true,
    color: '#ff0000'
}));
cube.rotation.x = Math.PI * 0.1;
scene.add(cube);

// start animation
animate();

Let me know if you need any other information.

Please suggest.

score 2 · Answer 1 · edited May 23 '17 at 12:34

2

The first image is a Perspective projection the second is an Orthographic projection.

There is a SO thread here that explains how to set up an orthographic camera:
https://stackoverflow.com/a/17567292/2941902

edited May 23 '17 at 12:34

Community

1
1

answered Feb 13 '14 at 15:26

Jason Sweeters

161
5

Thanks for looking into, I read the SO link you've referred, when I made Camera changes, my script stopped working, I'm sure I'm making some wrong changes or missing something. But I just tried making changes in cube.rotation with "X" and "Y" suggested by SirBraneDamuj and it worked!!! – UID Feb 13 '14 at 16:11

score 2 · Accepted Answer · answered Feb 13 '14 at 15:45

cube.rotation.x = Math.PI * 0.1;

With this line, you're tilting the cube by 0.1*pi on its X axis (horizontal). I'm not sure exactly what values you need, but you can adjust the rotation on each axis by using y or z instead of x. Just play around with those values until it looks how you want it to look.

Rough guess, I'm gonna say you want to rotate it about 70 degrees (convert to radians) on the Y axis and maybe 20 degrees on the Z axis.

Now, if you want it to look exactly like your picture, then the other guy's answer is what you're looking for. You need an orthographic projection.

Thanks it worked, I just changes "cube.rotation.x = Math.PI * 0.1;" to >>> "cube.rotation.x = Math.PI * 0.1; cube.rotation.y = Math.PI * 0.3; " And it worked!!! — UID, Feb 13 '14 at 16:13

Change the angle of 3D "Cube" created using Three.js

2 Answers2