(First time here, so please let me know if there’s anything wrong with this post.
Also, I’m not an experienced programmer.)
I’ve been getting performance drop in mobile (Android) that only happens in portrait mode.
Project runs fine in desktop and in landscape mode in mobile.
Another weird thing is that this happens with Chrome and Firefox, however it doesn’t in Fullscreen Browser (an app for fullscreen browsing).
It happens even in this simple example:
(click left/right side of screen to rotate camera accordingly - rotates smoothly, except in cases mentioned above)
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
//Chao
var geometry = new THREE.BoxGeometry( 100, 1, 100 );
var material = new THREE.MeshLambertMaterial( { color: 0xffffff } );
var chao = new THREE.Mesh( geometry, material );
scene.add( chao );
chao.receiveShadow = true;
// Cubo1
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshLambertMaterial( { color: 0xffffff } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
cube.position.y = 2;
cube.castShadow = true;
var ambientLight = new THREE.AmbientLight(0xffffff,0.5);
scene.add(ambientLight);
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(0, 20, 8);
spotLight.castShadow = true;
scene.add(spotLight);
camera.position.y = 2;
camera.position.z = 5;
window.addEventListener('deviceorientation', function(e) {
ube.rotation.x = e.alpha/100;
cube.rotation.y = e.beta/100;
cube.rotation.z = e.gamma/100;
});
var x, y;
var pressed=false;
window.addEventListener( 'mousedown', onTouchStart );
window.addEventListener( 'touchstart', onTouchStart );
function onTouchStart( event ) {
if ( event.changedTouches ) {
x = event.changedTouches[ 0 ].pageX;
y = event.changedTouches[ 0 ].pageY;
} else {
x = event.clientX;
y = event.clientY;
}
pressed=true;
}
window.addEventListener( 'mouseup', onTouchEnd);
window.addEventListener( 'touchend', onTouchEnd );
function onTouchEnd( event ) {
pressed=false;
}
var animate = function () {
requestAnimationFrame( animate );
if(pressed){
if(x<window.innerWidth/2){
camera.rotation.y += 0.02;
}else{
camera.rotation.y -= 0.02;
}
}
renderer.render(scene, camera);
};
animate();