Положение камеры и управление устройством на примере волн

console.log("Desktop");
if (WEBGL.isWebGLAvailable() === false) {
	document.body.appendChild(WEBGL.getWebGLErrorMessage());
}
var SEPARATION = 100,
	AMOUNTX = 50,
	AMOUNTY = 50;
var container;
var camera, scene, renderer, controls;
var particles, count = 0;
var mouseX = 0,
	mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

// var isMobile = isOSMobile();
var isMobile = true;

init();
animate();

function init() {
	container = document.createElement('div');
	document.body.appendChild(container);
	camera = new THREE.PerspectiveCamera(75, window.innerWidth /
		window.innerHeight, 1, 10000);
	if (isMobile) {
		controls = new THREE.DeviceOrientationControls(camera);
	}
	camera.position.z = 1000;
	scene = new THREE.Scene();
	//
	var numParticles = AMOUNTX * AMOUNTY;
	var positions = new Float32Array(numParticles * 3);
	var scales = new Float32Array(numParticles);
	var i = 0,
		j = 0;
	for (var ix = 0; ix < AMOUNTX; ix++) {
		for (var iy = 0; iy < AMOUNTY; iy++) {
			positions[i] = ix * SEPARATION - ((AMOUNTX *
				SEPARATION) / 2); // x
			positions[i + 1] = 0; // y
			positions[i + 2] = iy * SEPARATION - ((AMOUNTY *
				SEPARATION) / 2); // z
			scales[j] = 1;
			i += 3;
			j++;
		}
	}
	var geometry = new THREE.BufferGeometry();
	geometry.addAttribute('position', new THREE.BufferAttribute(
		positions, 3));
	geometry.addAttribute('scale', new THREE.BufferAttribute(scales,
		1));
	var material = new THREE.ShaderMaterial({
		uniforms: {
			color: {
				value: new THREE.Color(isMobile ? 0xffffff : 0x8D8D8F)
			},
		},
		vertexShader: document.getElementById(
			'vertexshader').textContent,
		fragmentShader: document.getElementById(
			'fragmentshader').textContent
	});

	particles = new THREE.Points(geometry, material);
	scene.add(particles);

	renderer = new THREE.WebGLRenderer({
		antialias: true
	});
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);
	container.appendChild(renderer.domElement);
	document.addEventListener('mousemove', onDocumentMouseMove,
		false);
	window.addEventListener('resize', onWindowResize, false);
	if (isMobile) {
		window.addEventListener("deviceorientation", handleOrientation, true);
	}
}

function handleOrientation(e) {
	var absolute = e.absolute;
	var alpha = e.alpha;// x -90 ... 90
	var beta = e.beta;// y 180 ... 0
	var gamma = e.gamma;// x -90 ... 90

	mouseX = -5 * windowHalfX * (gamma / 90);
	//mouseY = -windowHalfY * ((beta - 90) / 90);

	// console.log(mouseX.toFixed(2), ' x ', mouseY.toFixed(2));
}

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 onDocumentMouseMove(event) {
	mouseX = event.clientX - windowHalfX;
	mouseY = event.clientY - windowHalfY;
}

//
function animate() {
	requestAnimationFrame(animate);
	render();
	if (isMobile) {
		controls.update();
	}
}

function render() {
	camera.position.x += (mouseX - camera.position.x) * .05;
	if(isMobile) {
		camera.position.y = 550;
	} else {
		camera.position.y += (-mouseY - camera.position.y) * .05;
	}
	camera.lookAt(scene.position);
	var positions = particles.geometry.attributes.position.array;
	var scales = particles.geometry.attributes.scale.array;
	var i = 0,
		j = 0;
	for (var ix = 0; ix < AMOUNTX; ix++) {
		for (var iy = 0; iy < AMOUNTY; iy++) {
			positions[i + 1] = (Math.sin((ix + count) * 0.3) * 50) +
				(Math.sin((iy + count) * 0.5) * 50);
			scales[j] = (Math.sin((ix + count) * 0.3) + 1) * 8 +
				(Math.sin((iy + count) * 0.5) + 1) * 8;
			i += 3;
			j++;
		}
	}
	particles.geometry.attributes.position.needsUpdate = true;
	particles.geometry.attributes.scale.needsUpdate = true;
	renderer.render(scene, camera);
	count += 0.1;
}

function isOSMobile() {
	var userAgent = navigator.userAgent || navigator.vendor || window.opera;

	if (/android/i.test(userAgent)) {
		return true;
	}
	if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
		return true;
	}

	return false;
}