I am currently trying to make a rotating cube with textures. I also want the cube to rotate on it’s x- and y-axis (back and forth) by using controls (arrow images which rotate the cube on mouseover). When rotating it on the x-axis the back side of the cube is upside down.
I know that this has to do with the way UV mapping works. So I tried to correct that on cube initialization, which worked fine. But when I try to rotate the cube on it’s y-axis, the texture is upside down again. So I learned that I have to change the texture orientation on the fly – according to the rotation request.
But this doesn’t work for me. I found no way to change “faceVertexUvs[0][5]” after the cube is initialized. Trying to set “needsUpdate” for the cube geometry on initialization didn’t help.
Hope I made myself clear. Is there some sort of solution to that problem?
Thanks in advance
Michael
To illustrate my problem better: I post my source code here.
It cannot be demonstrated in JsFiddle as using texture images from another domain is not allowed (and CORS didn’t work). Just copy-paste the following code and save it as “test.html” locally. A texture image is availabe here: http://www.mikelmade.de/cors/t.png. It should be in the same directory as “test.html”. Open “test.html” in a WebGL-capable browser, then pass the mouse over “up” and you should see what I mean.
<html><head><script src="jquery.js"></script></head><body>
<script src="https://raw.github.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://raw.github.com/mrdoob/three.js/master/examples/js/libs/stats.min.js"> </script>
<script>
var cubeGeo;
var materials = [];
var container, stats;
var camera, scene, renderer;
var cube, plane;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'Drag to spin the cube';
container.appendChild( info );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.y = 150;
camera.position.z = 500;
scene = new THREE.Scene();
// add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0x555555);
scene.add(ambientLight);
// add directional light source
var directionalLight = new THREE.DirectionalLight(0xEEEEEE);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
// Cube
for ( var i = 0; i < 6; i ++ ) {
var img = new Image();
img.src = 't.png';
var tex = new THREE.Texture(img);
img.tex = tex;
img.onload = function() { this.tex.needsUpdate = true; };
var mat = new THREE.MeshLambertMaterial({map: tex});
materials.push(mat);
}
cubeGeo = new THREE.CubeGeometry(200,200,200,1,1,1);
cubeGeo.uvsNeedUpdate = true;
cubeGeo.dynamic = true;
cube = new THREE.Mesh( cubeGeo, new THREE.MeshFaceMaterial( materials ) );
cube.position.y = 150;
scene.add( cube );
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize( window.innerWidth, window.innerHeight );
// enable shadows on the renderer
renderer.shadowMapEnabled = true;
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseDown( event ) {
event.preventDefault();
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
document.addEventListener( 'mouseout', onDocumentMouseOut, false );
mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
}
function onDocumentMouseUp( event ) {
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function onDocumentMouseOut( event ) {
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function onDocumentTouchStart( event ) {
if ( event.touches.length === 1 ) {
event.preventDefault();
mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length === 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
}
}
function animatex(dir) {
cubeGeo.faceVertexUvs[0][5] = [new THREE.UV(1, 0), new THREE.UV(1, 1), new THREE.UV(0, 1), new THREE.UV(0, 0)];
animate2(dir);
}
var anim = 0;
function animate2(dir) {
requestAnimationFrame(function() {
cubeGeo.faceVertexUvs[0][5] = [new THREE.UV(1, 0), new THREE.UV(1, 1), new THREE.UV(0, 1), new THREE.UV(0, 0)];
if(anim == 1) {
animate2(dir);
}
});
render2();
stats.update();
}
function render2() {
cube.rotation.x = cube.rotation.x+0.06;
renderer.render( scene, camera );
}
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
$('#test').html(cube.rotation.y);
renderer.render( scene, camera );
}
</script>
<div id="up" style="position:absolute;z-index:500000;left:100px;top:20px;" class="nav">up</div>
<div id="down" style="position:absolute;z-index:500000;left:100px;top:40px;" class="nav">down</div>
<div id="left" style="position:absolute;z-index:500000;left:100px;top:60px;" class="nav">left</div>
<div id="right" style="position:absolute;z-index:500000;left:100px;top:80px;" class="nav">right</div>
<div id="test" style="position:absolute;z-index:500000;left:100px;top:100px;"> </div>
<script>
var _interval = 0;
$(document).ready(function(){
$('.nav').mouseover(function() {
switch($(this).prop('id')) {
case 'up':
anim = 1;
animatex('up');
break;
}
});
$('.nav').mouseout(
function () {
anim = 0;
}
);
});
</script>
</body>
</html>
cubeGeo was a geometry, not a mesh, so the setting is.
And a fiddle
http://jsfiddle.net/crossphire/JebXL/2/
Here is the modified example
This link may help. https://github.com/mrdoob/three.js/issues/667