I am currently experimenting with rotating a cube on a corner, aiming to make it spin like the image shown in the link below.
As a newcomer to Three.js, I apologize if this question seems basic.
Below is the code for my current setup:
var geometry= new THREE.CubeGeometry (200,200,200, 4, 4, 4);
// material
var material = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('inc/cube.jpg'), overdraw: true
});
cube = new THREE.Mesh( geometry, material );
cube.overdraw = true;
cube.position.y = 80;
cube.position.x = 5;
cube.position.z = 6;
cube.rotation.z = 14.9;
cube.rotation.y = 0 ;
cube.rotation.x = 0 ;
scene.add(cube);
Additionally, I have noticed that when I set the dimensions of the CubeGeometry to (200,200,200) without the 4's, the texture on the cube warps. Does anyone know how to prevent this warping?
For rendering, I am using the following:
renderer = new THREE.CanvasRenderer();
renderer.setClearColorHex(0xffffff, 0);
renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement );While this setup seems to function well on most browsers, I have encountered issues with canvas opacity when using the WebGL renderer.
To view the current state of the project, please visit