rotation of a child object (camera) relative parent object (spaceship) - three.js

Question

I have two problems in my experimental project - (WASDEQ - control key, and mouse)
Rotation of a child object (camera) relative parent object.
How can I rotate the spaceship on 180-degree relative the camera?
When I rotate the spaceship with mouse only the Y-axis (right or left mouse moving), it automatically rotates on the other axis.
var loader = new THREE.JSONLoader();
loader.load("https://api.myjson.com/bins/2w5m2", function (geom, mater) {
var mater = new THREE.MeshNormalMaterial({ color: 0x00ff00 });
var spaceShip = new THREE.Mesh(geom, mater);
onLoadCompleted(spaceShip);
});
var onLoadCompleted = function (spaceShip) {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 2000);
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(10, 10, 10);
var material = new THREE.MeshNormalMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
cube.position.z = -300;
cube.position.y = 10;
camera.position.y = 5;
camera.position.z = 30;
scene.add(cube);
scene.add(spaceShip);
spaceShip.add(camera);
for (var i = 0; i < 1000; ++i) {
var dotGeometry = new THREE.Geometry();
dotGeometry.vertices.push(new THREE.Vector3(Math.random() * (1500 + 1500) - 1500, Math.random() * (1500 + 1500) - 1500, Math.random() * (1500 + 1500) - 1500));
var dotMaterial = new THREE.PointCloudMaterial({ size: 1, sizeAttenuation: true });
var dot = new THREE.Points(dotGeometry, dotMaterial);
scene.add(dot);
}
var cameraControl = new CameraControl(spaceShip);
var render = function () {
cameraControl.update();
requestAnimationFrame(render);
renderer.render(scene, camera);
};
render();
}
function CameraControl(object3D) {
var rotationQuaternion = new THREE.Quaternion();
var rotationVector = new THREE.Vector3(0, 0, 0);
var movingVector = new THREE.Vector3(0, 0, 0);
var rotationSpeed = 0.01;
var movingSpeed = 1;
this.update = function () {
object3D.translateX(movingVector.x);
object3D.translateY(movingVector.y);
object3D.translateZ(movingVector.z);
rotationQuaternion.set(rotationVector.x, rotationVector.y, rotationVector.z, 1).normalize();
object3D.quaternion.multiply(rotationQuaternion);
object3D.rotation.setFromQuaternion(object3D.quaternion, object3D.rotation.order);
};
window.addEventListener('keydown', function (event) {
if (event.keyCode == 87) {
movingVector.z = -1;
}
else if (event.keyCode == 83) {
movingVector.z = 1;
}
else if (event.keyCode == 65) {
movingVector.x = -1;
}
else if (event.keyCode == 68) {
movingVector.x = 1;
}
else if (event.keyCode == 81) {
movingVector.y = -1;
}
else if (event.keyCode == 69) {
movingVector.y = 1;
}
movingVector.multiplyScalar(movingSpeed);
});
window.addEventListener('keyup', function (event) {
if (event.keyCode == 87) {
movingVector.z = 0;
}
else if (event.keyCode == 83) {
movingVector.z = 0;
}
else if (event.keyCode == 65) {
movingVector.x = 0;
}
else if (event.keyCode == 68) {
movingVector.x = 0;
}
else if (event.keyCode == 81) {
movingVector.y = 0;
}
else if (event.keyCode == 69) {
movingVector.y = 0;
}
});
window.addEventListener('mousemove', function (event) {
rotationVector.y = (window.innerWidth / 2 - event.clientX) / (window.innerWidth / 2) * rotationSpeed;
rotationVector.x = (window.innerHeight / 2 - event.clientY) / (window.innerHeight / 2) * rotationSpeed;
});
}

Answer 1

The second problem is not actual. that's my carelessness. I forgot that quaternions are used for rotation.