使用wave示例的相机位置和设备控件

Question

我有一个网站，需要使用Threejs。我在登录页面中使用了wave示例，它在台式机/笔记本电脑上运行良好。

但是，我需要能够移动波浪（行为与台式机中的鼠标相同），但是要使用设备陀螺仪/加速度计，并且它可以使用我在另一个示例中找到的devicecontrols进行工作。问题是这是我第一次使用3d并与3d一起工作，我迷路了。这些点非常小，它们似乎只是沿很小的一条线移动，我不知道相机的外观或位置。

例如，

• 所需行为（https://www.dropbox.com/s/d11srwqww8jtuda/PhoneWanted.png?dl=0）

• 当前在桌面（https://www.dropbox.com/s/x3rpcnovrfr2v1x/Desktop.png?dl=0）

• 移动设备上的当前（https://www.dropbox.com/s/c9c1mojgi5zt55y/IMG_2385.jpeg?dl=0）

移动设备上的外观应与台式机上的外观相同，但只能水平移动波浪...

这可能吗？

移动脚本

<script>
	if (screen && screen.width < 900) {
		//alert("Mobile");
		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;
			init();
			animate();
			function init() {
				container = document.createElement( 'div' );
				document.body.appendChild( container );
                camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
                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( 0xffffff ) },
					},
					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 );
			}

            function animate() {
				window.requestAnimationFrame( animate );
				controls.update();
				renderer.render( scene, camera );
			}
			function onWindowResize() {
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize( window.innerWidth, window.innerHeight );
			}
	}
</script>

解决方案

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;
}

谢谢！

Answer 1

解决了。代码有效，Y轴运动被禁用。

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;
}