вращение камеры игрока на сфере (javascript / three.js) - PullRequest
0 голосов
/ 19 февраля 2019

Я пытаюсь заставить игрока ходить от первого лица на планете в three.js / javascript.В том, что я пишу, я хочу две вещи:

a) Игрок должен правильно перемещаться по планете с двумя типами движения: вращение вокруг себя (кнопки влево и вправо и A / D) и движение впередназад (кнопки W / S).С помощью этой темы https://gamedev.stackexchange.com/questions/59298/walking-on-a-sphere мне удалось это сделать.

b) Камера, прикрепленная к игроку, должна вращаться горизонтально (перпендикулярно плоскости игрока), когда игрок вращается вокруг себя(Кнопки A / D), и камера должна переместиться с 0 (надир) на 180 (зенит) градусов - это означает, что игрок смотрит вверх и вниз с помощью кнопок со стрелками вверх / стрелка вниз (в конце концов с помощью мыши, но это произойдет позжеточка).

У меня проблема с b, он изначально правильно вращается, но по мере движения игрока камера переходит в другое положение.

Чтобы помочь мне "отладить"проблема Я создал объект ArrowHelper, который в конечном итоге должен стать нашей камерой.

html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta http-equiv="Cache-Control" content="no-cache"/>
        <meta http-equiv="Expires" content="-1"/>
        <meta http-equiv="Pragma" content="no-cache"/>
        <title>Planet</title>
        <link href="planet.css" rel="stylesheet" type="text/css"/>
        <script src="../three.js/build/three.js"></script>
        <script src="../three.js/examples/js/libs/stats.min.js"></script>
        <script src="planet.js"></script>
    </head>
    <body>
        <div id="divScreen">
        </div>
    </body>
</html>

var g_Game;
var g_Player;

window.onload = function () {
    initGame();
}

function initGame() {
    g_Game = new C_Game();

    g_Game.container = document.getElementById("divScreen");
    document.body.appendChild(g_Game.container);

    g_Game.scene = new THREE.Scene();

    g_Game.cameraPerspective = new THREE.PerspectiveCamera( 90, 1 * g_Game.aspect, 1, 10000 );
    g_Game.cameraPerspective.position.set(0.0, 0.0, g_Game.cameraDistance);

    //textures
    var earthTexture = new THREE.TextureLoader().load( 'https://i.ibb.co/vYh8tLY/land-ocean-ice-cloud-2048.jpg' );

    g_Game.earth = new THREE.Mesh(
        new THREE.SphereBufferGeometry( 100, 128, 64 ),
        new THREE.MeshBasicMaterial( { map: earthTexture } )
    );
    g_Game.earth.position.set(0.0, 0.0, 0.0);
    g_Game.scene.add(g_Game.earth);

    g_Game.cubePlayer = new THREE.Mesh(
        new THREE.BoxBufferGeometry( 10, 10, 10 ),
        new THREE.MeshBasicMaterial( { wireframe: true } )
    );
    g_Game.cubePlayer.position.set(0.0, 0.0, 105.0);
    //g_Game.cubePlayer.add(g_Game.cameraPerspective);
    //g_Game.cameraPerspective.position.z = 0;
    g_Game.scene.add(g_Game.cubePlayer);

    var matrix = new THREE.Matrix4();
    matrix.extractRotation(g_Game.cubePlayer.matrix);
    var direction = new THREE.Vector3( 0, 1, 0 );
    direction.applyMatrix4(matrix);
    var dir = direction.normalize();

    var origin = g_Game.cubePlayer.position; //new THREE.Vector3( 0, 0, 105 );
    var length = 10;
    var color = 0xff0000;
    arrowHelper = new THREE.ArrowHelper( dir, origin, length, color );
    g_Game.cubeaxis = dir;
    g_Game.scene.add(arrowHelper);

    g_Game.cameraPerspective.lookAt(g_Game.earth.position);

    g_Game.renderer = new THREE.WebGLRenderer( { antialias: true } );
    g_Game.renderer.setPixelRatio( window.devicePixelRatio );
    g_Game.renderer.setSize( g_Game.SCREEN_WIDTH, g_Game.SCREEN_HEIGHT );
    g_Game.container.appendChild( g_Game.renderer.domElement );
    g_Game.renderer.autoClear = false;

    //g_Game.stats = new Stats();
    //g_Game.stats.showPanel(0);
    //g_Game.container.appendChild(g_Game.stats.dom);

    g_Player = new C_Player();
    g_Player.setspeed(0.08, 0.8);

    jsSetEventHandlers();

    animate();
}

function jsSetEventHandlers() {
    window.addEventListener("resize", onWindowResize, false );

    window.addEventListener("keydown", onKeyDown, false);
    window.addEventListener("keyup", onKeyUp, false);
};

// Keyboard key down
function onKeyDown(e) {
    switch (e.keyCode) {
        case 37: // Left
        case 65: // A
            g_Player.keyleft = true;
            break;
        case 38: // Up
            g_Player.keyarrowup = true;
            break;
        case 87: // W
            g_Player.keyup = true;
            break;
        case 39: // Right
        case 68: // D
            g_Player.keyright = true;
            break;
        case 40: // Down
            g_Player.keyarrowdown = true;
            break;
        case 83: // S
            g_Player.keydown = true;
            break;  
    }
}

// Keyboard key up
function onKeyUp(e) {
    switch (e.keyCode) {
        case 37: // Left
        case 65: // A
            g_Player.keyleft = false;
            break;
        case 38: // Up
            g_Player.keyarrowup = false;
            break;
        case 87: // W
            g_Player.keyup = false;
            break;
        case 39: // Right
        case 68: // D
            g_Player.keyright = false;
            break;
        case 40: // Down
            g_Player.keyarrowdown = false;
            break;
        case 83: // S
            g_Player.keydown = false;
            break;  
    }
}

function onWindowResize() {
    g_Game.SCREEN_WIDTH = window.innerWidth;
    g_Game.SCREEN_HEIGHT = window.innerHeight;
    g_Game.aspect = g_Game.SCREEN_WIDTH / g_Game.SCREEN_HEIGHT;
    g_Game.renderer.setSize(g_Game.SCREEN_WIDTH, g_Game.SCREEN_HEIGHT);
    g_Game.cameraPerspective.aspect = 1 * g_Game.aspect;
    g_Game.cameraPerspective.updateProjectionMatrix();
}

function animate() {
    requestAnimationFrame(animate);
    //g_Game.stats.begin();

    render();

    //g_Game.stats.end();
}

function render() {
    g_Player.update();
    g_Game.renderer.render(g_Game.scene, g_Game.cameraPerspective);
}

//Classes
var C_Player = function() {
    this.ANGULAR_SPEED_MOVEMENT = 0.8;
    this.ANGULAR_SPEED_ROTATION = 0.08;

    this.keyleft = false;
    this.keyright = false;
    this.keyup = false;
    this.keydown = false;
    this.keyarrowup = false;
    this.keyarrowdown = false;
    this.QuatKeyU;
    this.QuatKeyD;
    this.QuatKeyL;
    this.QuatKeyR;

    this.setspeed = function(speedM, speedR) {
        this.ANGULAR_SPEED_MOVEMENT = speedM;
        this.ANGULAR_SPEED_ROTATION = speedR;
        this.QuatKeyU = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), -(this.ANGULAR_SPEED_MOVEMENT*Math.PI) / 180);
        this.QuatKeyD = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0),  (this.ANGULAR_SPEED_MOVEMENT*Math.PI) / 180);
        this.QuatKeyL = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 0, 1),  (this.ANGULAR_SPEED_ROTATION*Math.PI) / 180);
        this.QuatKeyR = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 0, 1), -(this.ANGULAR_SPEED_ROTATION*Math.PI) / 180);
    }

    var qx;
    var qy;
    var qz;
    var qw;
    var rotWorldMatrix;

    this.update = function(seconds) {
        var rlud = false;

        if (this.keyup) {
            g_Game.cubePlayer.quaternion.multiply(this.QuatKeyU);
            g_Game.cameraPerspective.quaternion.multiply(this.QuatKeyU);
            arrowHelper.quaternion.multiply(this.QuatKeyU);
            rlud = true;
        } else if (this.keydown) {
            g_Game.cubePlayer.quaternion.multiply(this.QuatKeyD);
            g_Game.cameraPerspective.quaternion.multiply(this.QuatKeyD);
            arrowHelper.quaternion.multiply(this.QuatKeyD);
            rlud = true;
        };
        if (this.keyleft) {
            g_Game.cubePlayer.quaternion.multiply(this.QuatKeyL);
            g_Game.cameraPerspective.quaternion.multiply(this.QuatKeyL);
            arrowHelper.quaternion.multiply(this.QuatKeyL);
            rlud = true;
        } else if (this.keyright) {
            g_Game.cubePlayer.quaternion.multiply(this.QuatKeyR);
            g_Game.cameraPerspective.quaternion.multiply(this.QuatKeyR);
            arrowHelper.quaternion.multiply(this.QuatKeyR);
            rlud = true;
        };

        if (rlud == true) {
            qx = g_Game.cubePlayer.quaternion.x;
            qy = g_Game.cubePlayer.quaternion.y;
            qz = g_Game.cubePlayer.quaternion.z;
            qw = g_Game.cubePlayer.quaternion.w;
            g_Game.cubePlayer.position.x = 2 * (qy * qw + qz * qx) * 105;
            g_Game.cubePlayer.position.y = 2 * (qz * qy - qw * qx) * 105;
            g_Game.cubePlayer.position.z = ((qz * qz + qw * qw) - (qx * qx + qy * qy)) * 105;

            qx = g_Game.cameraPerspective.quaternion.x;
            qy = g_Game.cameraPerspective.quaternion.y;
            qz = g_Game.cameraPerspective.quaternion.z;
            qw = g_Game.cameraPerspective.quaternion.w;
            g_Game.cameraPerspective.position.x = 2 * (qy * qw + qz * qx) * g_Game.cameraDistance;
            g_Game.cameraPerspective.position.y = 2 * (qz * qy - qw * qx) * g_Game.cameraDistance;
            g_Game.cameraPerspective.position.z = ((qz * qz + qw * qw) - (qx * qx + qy * qy)) * g_Game.cameraDistance;

            qx = arrowHelper.quaternion.x;
            qy = arrowHelper.quaternion.y;
            qz = arrowHelper.quaternion.z;
            qw = arrowHelper.quaternion.w;
            arrowHelper.position.x = 2 * (qy * qw + qz * qx) * 105;
            arrowHelper.position.y = 2 * (qz * qy - qw * qx) * 105;
            arrowHelper.position.z = ((qz * qz + qw * qw) - (qx * qx + qy * qy)) * 105;
        }

        if (this.keyarrowup) {
            var q = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), -(this.ANGULAR_SPEED_MOVEMENT*Math.PI*10) / 180);
            arrowHelper.quaternion.multiply(q);
            // TRIAL AND ERRORS HERE
            //arrowHelper.rotateOnWorldAxis(new THREE.Vector3(1, 0, 0), -(this.ANGULAR_SPEED_MOVEMENT*Math.PI) / 180);
            //arrowHelper.rotateOnAxis(new THREE.Vector3(1, 0, 0), -(this.ANGULAR_SPEED_MOVEMENT*Math.PI) / 180);
            /*      
            var matrix = new THREE.Matrix4();
            matrix.extractRotation(g_Game.cubePlayer.matrix);
            var direction = new THREE.Vector3( 0, 1, 0 );
            direction.applyMatrix4(matrix);
            var dir = direction.normalize();

            rotWorldMatrix = new THREE.Matrix4();
            rotWorldMatrix.makeRotationAxis(dir,  (this.ANGULAR_SPEED_ROTATION*Math.PI) / 180);
            rotWorldMatrix.multiply(g_Game.cubePlayer.matrix);
            g_Game.cubePlayer.matrix = rotWorldMatrix;
            g_Game.cubePlayer.rotation.setFromRotationMatrix(g_Game.cubePlayer.matrix);
            */
        }
        if (this.keyarrowdown) {
            var q = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), (this.ANGULAR_SPEED_MOVEMENT*Math.PI*10) / 180);
            arrowHelper.quaternion.multiply(q);
        }
    }
}

function C_Game() {
    this.SCREEN_WIDTH = window.innerWidth;
    this.SCREEN_HEIGHT = window.innerHeight;
    this.aspect = this.SCREEN_WIDTH / this.SCREEN_HEIGHT;
    this.container;
    this.stats;
    this.scene;
    this.renderer;
    this.earth;
    this.cubePlayer;
    this.controls;
    this.cameraPerspective;
    this.cameraDistance = 125;
    this.cubeaxis = new THREE.Vector3(1, 0, 0);
}
#divScreen {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    overflow: auto;
    margin: 0px;
    padding: 0px;
    border: 0px;    
    background-color: #AACCFF;
    overflow: hidden;
}
<script src="https://threejs.org/build/three.min.js"></script>
<div id="divScreen"></div>

Я приложил некоторые усилия - я не очень хорош с кватернионами - но, похоже, ничего не работает.В этот момент вы можете видеть // TRIAL AND ERRORS HERE мои различные попытки ротации, закомментированные, поскольку ни одна из них не будет работать (включая не закомментированную).

jsfiddle: https://jsfiddle.net/z18ctvme/3/

Буду признателен вампомощь в решении этого вопроса.Заранее спасибо

1 Ответ

0 голосов
/ 22 февраля 2019

Решение закодировано в вашем вопросе:

Камера, подключенная к плееру [...]

Упростите вещи и прикрепите arrowHelper к g_Game.cubePlayer.Это означает, что arrowHelper должен быть потомком g_Game.cubePlayer, а не THREE.Scene():

arrowHelper = new THREE.ArrowHelper( dir, new THREE.Vector3( 0, 0, 0 ), length, color );
g_Game.cubePlayer.add(arrowHelper);

Это означает, что arrowHelper всегда находится в той же позиции относительноg_Game.cubePlayer.В этом случае относительная позиция THREE.Vector3( 0, 0, 0 ).

arrowHelper.quaternion содержит только относительную ориентацию arrowHelper.
. Достаточно обновить arrowHelper.quaternion в случае this.keyarrowup или * 1027.*:

this.update = function(seconds) {
    var rlud = false;

    if (this.keyup) {
        g_Game.cubePlayer.quaternion.multiply(this.QuatKeyU);
        g_Game.cameraPerspective.quaternion.multiply(this.QuatKeyU);
        rlud = true;
    } else if (this.keydown) {
        g_Game.cubePlayer.quaternion.multiply(this.QuatKeyD);
        g_Game.cameraPerspective.quaternion.multiply(this.QuatKeyD);
        rlud = true;
    };
    if (this.keyleft) {
        g_Game.cubePlayer.quaternion.multiply(this.QuatKeyL);
        g_Game.cameraPerspective.quaternion.multiply(this.QuatKeyL);
        rlud = true;
    } else if (this.keyright) {
        g_Game.cubePlayer.quaternion.multiply(this.QuatKeyR);
        g_Game.cameraPerspective.quaternion.multiply(this.QuatKeyR);
        rlud = true;
    };

    if (rlud == true) {
        qx = g_Game.cubePlayer.quaternion.x;
        qy = g_Game.cubePlayer.quaternion.y;
        qz = g_Game.cubePlayer.quaternion.z;
        qw = g_Game.cubePlayer.quaternion.w;
        g_Game.cubePlayer.position.x = 2 * (qy * qw + qz * qx) * 105;
        g_Game.cubePlayer.position.y = 2 * (qz * qy - qw * qx) * 105;
        g_Game.cubePlayer.position.z = ((qz * qz + qw * qw) - (qx * qx + qy * qy)) * 105;

        qx = g_Game.cameraPerspective.quaternion.x;
        qy = g_Game.cameraPerspective.quaternion.y;
        qz = g_Game.cameraPerspective.quaternion.z;
        qw = g_Game.cameraPerspective.quaternion.w;
        g_Game.cameraPerspective.position.x = 2 * (qy * qw + qz * qx) * g_Game.cameraDistance;
        g_Game.cameraPerspective.position.y = 2 * (qz * qy - qw * qx) * g_Game.cameraDistance;
        g_Game.cameraPerspective.position.z = ((qz * qz + qw * qw) - (qx * qx + qy * qy)) * g_Game.cameraDistance;
    }

    if (this.keyarrowup) {
        var q = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), -(this.ANGULAR_SPEED_MOVEMENT*Math.PI*10) / 180);
        arrowHelper.quaternion.multiply(q);
    }
    if (this.keyarrowdown) {
        var q = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), (this.ANGULAR_SPEED_MOVEMENT*Math.PI*10) / 180);
        arrowHelper.quaternion.multiply(q);
    }
}

См. Пример, где я применил изменения к вашему исходному коду:

var g_Game;
var g_Player;

window.onload = function () {
	initGame();
}

function initGame() {
	g_Game = new C_Game();

	g_Game.container = document.getElementById("divScreen");
	document.body.appendChild(g_Game.container);

	g_Game.scene = new THREE.Scene();

	g_Game.cameraPerspective = new THREE.PerspectiveCamera( 90, 1 * g_Game.aspect, 1, 10000 );
	g_Game.cameraPerspective.position.set(0.0, 0.0, g_Game.cameraDistance);
	
	//textures
	var earthTexture = new THREE.TextureLoader().load( 'https://i.ibb.co/vYh8tLY/land-ocean-ice-cloud-2048.jpg' );
	
	g_Game.earth = new THREE.Mesh(
		new THREE.SphereBufferGeometry( 100, 128, 64 ),
		new THREE.MeshBasicMaterial( { map: earthTexture } )
	);
	g_Game.earth.position.set(0.0, 0.0, 0.0);
	g_Game.scene.add(g_Game.earth);
	
	g_Game.cubePlayer = new THREE.Mesh(
		new THREE.BoxBufferGeometry( 10, 10, 10 ),
		new THREE.MeshBasicMaterial( { wireframe: true } )
	);
	g_Game.cubePlayer.position.set(0.0, 0.0, 105.0);
	//g_Game.cubePlayer.add(g_Game.cameraPerspective);
	//g_Game.cameraPerspective.position.z = 0;
	g_Game.scene.add(g_Game.cubePlayer);

	var matrix = new THREE.Matrix4();
	matrix.extractRotation(g_Game.cubePlayer.matrix);
	var direction = new THREE.Vector3( 0, 1, 0 );
	direction.applyMatrix4(matrix);
	var dir = direction.normalize();

	var origin = g_Game.cubePlayer.position; //new THREE.Vector3( 0, 0, 105 );
	var length = 10;
	var color = 0xff0000;
	
  arrowHelper = new THREE.ArrowHelper( dir, new THREE.Vector3( 0, 0, 0 ), length, color );
  g_Game.cubePlayer.add(arrowHelper);

	g_Game.cubeaxis = dir;


	g_Game.cameraPerspective.lookAt(g_Game.earth.position);

	g_Game.renderer = new THREE.WebGLRenderer( { antialias: true } );
	g_Game.renderer.setPixelRatio( window.devicePixelRatio );
	g_Game.renderer.setSize( g_Game.SCREEN_WIDTH, g_Game.SCREEN_HEIGHT );
	g_Game.container.appendChild( g_Game.renderer.domElement );
	g_Game.renderer.autoClear = false;

	//g_Game.stats = new Stats();
	//g_Game.stats.showPanel(0);
	//g_Game.container.appendChild(g_Game.stats.dom);

	g_Player = new C_Player();
	g_Player.setspeed(0.08, 0.8);

	jsSetEventHandlers();
	
	animate();
}

function jsSetEventHandlers() {
	window.addEventListener("resize", onWindowResize, false );

	window.addEventListener("keydown", onKeyDown, false);
	window.addEventListener("keyup", onKeyUp, false);
};

// Keyboard key down
function onKeyDown(e) {
	switch (e.keyCode) {
		case 37: // Left
		case 65: // A
			g_Player.keyleft = true;
			break;
		case 38: // Up
			g_Player.keyarrowup = true;
			break;
		case 87: // W
			g_Player.keyup = true;
			break;
		case 39: // Right
		case 68: // D
			g_Player.keyright = true;
			break;
		case 40: // Down
			g_Player.keyarrowdown = true;
			break;
		case 83: // S
			g_Player.keydown = true;
			break;	
	}
}

// Keyboard key up
function onKeyUp(e) {
	switch (e.keyCode) {
		case 37: // Left
		case 65: // A
			g_Player.keyleft = false;
			break;
		case 38: // Up
			g_Player.keyarrowup = false;
			break;
		case 87: // W
			g_Player.keyup = false;
			break;
		case 39: // Right
		case 68: // D
			g_Player.keyright = false;
			break;
		case 40: // Down
			g_Player.keyarrowdown = false;
			break;
		case 83: // S
			g_Player.keydown = false;
			break;	
	}
}

function onWindowResize() {
	g_Game.SCREEN_WIDTH = window.innerWidth;
	g_Game.SCREEN_HEIGHT = window.innerHeight;
	g_Game.aspect = g_Game.SCREEN_WIDTH / g_Game.SCREEN_HEIGHT;
	g_Game.renderer.setSize(g_Game.SCREEN_WIDTH, g_Game.SCREEN_HEIGHT);
	g_Game.cameraPerspective.aspect = 1 * g_Game.aspect;
	g_Game.cameraPerspective.updateProjectionMatrix();
}

function animate() {
	requestAnimationFrame(animate);
	//g_Game.stats.begin();

	render();

	//g_Game.stats.end();
}

function render() {
	g_Player.update();
	g_Game.renderer.render(g_Game.scene, g_Game.cameraPerspective);
}

//Classes
var C_Player = function() {
	this.ANGULAR_SPEED_MOVEMENT = 0.8;
	this.ANGULAR_SPEED_ROTATION = 0.08;

	this.keyleft = false;
	this.keyright = false;
	this.keyup = false;
	this.keydown = false;
	this.keyarrowup = false;
	this.keyarrowdown = false;
	this.QuatKeyU;
	this.QuatKeyD;
	this.QuatKeyL;
	this.QuatKeyR;
	
	this.setspeed = function(speedM, speedR) {
		this.ANGULAR_SPEED_MOVEMENT = speedM;
		this.ANGULAR_SPEED_ROTATION = speedR;
		this.QuatKeyU = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), -(this.ANGULAR_SPEED_MOVEMENT*Math.PI) / 180);
		this.QuatKeyD = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0),  (this.ANGULAR_SPEED_MOVEMENT*Math.PI) / 180);
		this.QuatKeyL = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 0, 1),  (this.ANGULAR_SPEED_ROTATION*Math.PI) / 180);
		this.QuatKeyR = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 0, 1), -(this.ANGULAR_SPEED_ROTATION*Math.PI) / 180);
	}

	var qx;
	var qy;
	var qz;
	var qw;
	var rotWorldMatrix;

	this.update = function(seconds) {
		var rlud = false;

		if (this.keyup) {
			g_Game.cubePlayer.quaternion.multiply(this.QuatKeyU);
			g_Game.cameraPerspective.quaternion.multiply(this.QuatKeyU);
			rlud = true;
		} else if (this.keydown) {
			g_Game.cubePlayer.quaternion.multiply(this.QuatKeyD);
			g_Game.cameraPerspective.quaternion.multiply(this.QuatKeyD);
			rlud = true;
		};
		if (this.keyleft) {
			g_Game.cubePlayer.quaternion.multiply(this.QuatKeyL);
			g_Game.cameraPerspective.quaternion.multiply(this.QuatKeyL);
			rlud = true;
		} else if (this.keyright) {
			g_Game.cubePlayer.quaternion.multiply(this.QuatKeyR);
			g_Game.cameraPerspective.quaternion.multiply(this.QuatKeyR);
			rlud = true;
		};

		if (rlud == true) {
			qx = g_Game.cubePlayer.quaternion.x;
			qy = g_Game.cubePlayer.quaternion.y;
			qz = g_Game.cubePlayer.quaternion.z;
			qw = g_Game.cubePlayer.quaternion.w;
			g_Game.cubePlayer.position.x = 2 * (qy * qw + qz * qx) * 105;
			g_Game.cubePlayer.position.y = 2 * (qz * qy - qw * qx) * 105;
			g_Game.cubePlayer.position.z = ((qz * qz + qw * qw) - (qx * qx + qy * qy)) * 105;

			qx = g_Game.cameraPerspective.quaternion.x;
			qy = g_Game.cameraPerspective.quaternion.y;
			qz = g_Game.cameraPerspective.quaternion.z;
			qw = g_Game.cameraPerspective.quaternion.w;
			g_Game.cameraPerspective.position.x = 2 * (qy * qw + qz * qx) * g_Game.cameraDistance;
			g_Game.cameraPerspective.position.y = 2 * (qz * qy - qw * qx) * g_Game.cameraDistance;
			g_Game.cameraPerspective.position.z = ((qz * qz + qw * qw) - (qx * qx + qy * qy)) * g_Game.cameraDistance;
    }
		
		if (this.keyarrowup) {
			var q = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), -(this.ANGULAR_SPEED_MOVEMENT*Math.PI*10) / 180);
			arrowHelper.quaternion.multiply(q);
		}
		if (this.keyarrowdown) {
			var q = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), (this.ANGULAR_SPEED_MOVEMENT*Math.PI*10) / 180);
			arrowHelper.quaternion.multiply(q);
		}
	}
}

function C_Game() {
	this.SCREEN_WIDTH = window.innerWidth;
	this.SCREEN_HEIGHT = window.innerHeight;
	this.aspect = this.SCREEN_WIDTH / this.SCREEN_HEIGHT;
	this.container;
	this.stats;
	this.scene;
	this.renderer;
	this.earth;
	this.cubePlayer;
	this.controls;
	this.cameraPerspective;
	this.cameraDistance = 125;
	this.cubeaxis = new THREE.Vector3(1, 0, 0);
}
#divScreen {
	position: absolute;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;
	overflow: auto;
	margin: 0px;
	padding: 0px;
	border: 0px;	
	background-color: #AACCFF;
	overflow: hidden;
}
<script src="https://threejs.org/build/three.min.js"></script>
<div id="divScreen"></div>
...