javascript - 在球体上旋转玩家相机 (javascript/three.js)-6ren

javascript - 在球体上旋转玩家相机 (javascript/three.js)

转载作者：行者123 更新时间：2023-11-29 15:10:49

我正在尝试让玩家在 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/

非常感谢您帮助解决这个问题。提前谢谢你

最佳答案

解决方案是您问题中的编码:

A camera attached to the player [...]

简化事情并将 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 的相对方向。
在 this.keyarrowup 或 this.keyarrowdown 的情况下更新 arrowHelper.quaternion 就足够了:

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>

关于javascript - 在球体上旋转玩家相机 (javascript/three.js)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54766938/

文章推荐： Mysql配置问题

文章推荐： javascript - React中使用localstorage一次显示组件的方法

文章推荐： sql - MS SQL 到 MySQL

文章推荐： javascript - redux 商店外的 Redux 状态

iPhone，旋转 + EAGLView，旋转 =
...沮丧。我希望我的游戏仅在横向模式下运行。我已将适当的键/值添加到 Info.plist 文件中，以强制设备方向在启动时正确。我现在正在尝试旋转 OpenGL 坐标空间以匹配设备的坐标空间。我正
java - 我将如何创建一个旋转矩阵，将 X 旋转 a，Y 旋转 b，Z 旋转 c？
我如何创建一个旋转矩阵，将 X 旋转 a，Y 旋转 b，Z 旋转 c？我需要公式，除非您使用的是 ardor3d api 的函数/方法。矩阵是这样设置的 xx, xy, xz, yx, yy, y
c++ - 从全局位置/旋转/比例更新本地位置/旋转/比例？
假设我有一个包含 3 个 vector 的类(一个用于位置，一个用于缩放，一个用于旋转)我可以使用它们生成一个变换矩阵，该矩阵表示对象在 3D 空间中的位置、旋转和大小。然后我添加对象之间的父/子关系
javascript - CSS 旋转。旋转 div 但保持在完全相同的坐标？
所以我只是在玩一个小的 javascript 游戏，构建一个 pacman 游戏。你可以在这里看到它:http://codepen.io/acha5066/pen/rOyaPW 不过我对旋转有疑问。你
iphone - iOS 旋转 MKAnnotationView 以响应 MKMapView 旋转
在我的应用程序中，我有一个 MKMapView，其中显示了多个注释。 map 根据设备的航向旋转。要旋转 map ，请执行以下语句(由方法 locationManager 调用:didUpdateHe
javascript - 旋转 90/-90 度的图像模糊 jquery 旋转
使用此 jquery 插件时:http://code.google.com/p/jqueryrotate/wiki/Documentation我将图像旋转 90 度，无论哪个方向，它们最终都会变得模糊
css - 为什么不同的 CSS3 旋转 + 平移 vs 旋转 + 左
我有以下代码:CSS: .wrapper { margin:80px auto; width:300px; border:none; } .square { widt
manim边学边做--旋转
本篇介绍Manim中的两个旋转类的动画，名称差不多，分别是Rotate和Rotating。 Rotate类主要用于对图形对象进行指定角度、围绕特定点的精确旋转，适用于几何图形演示、物理模拟和机械运动
Qt图像移动/旋转
我只想通过小部件的轴移动图像并围绕小部件的中心旋转(就像任何数字绘画软件中的 Canvas )，但它围绕其左顶点旋转...... QPainter p(this); QTransform trans;
JavaScript 旋转
我需要先旋转图像，然后再将其加载到 Canvas 中。据我所知，我无法使用 canvas.rotate() 旋转它，因为它会旋转整个场景。有没有好的JS方法来旋转图片？ [不依赖于浏览器的方式] 最
安卓横屏180°旋转
我需要知道我的 Android 设备屏幕何时从一个横向旋转到另一个横向(rotation_90 到 rotation_270)。在我的 Android 服务中，我重新实现了 onConfigurati
Python图像处理丨图像缩放、旋转、翻转与图像平移
**摘要：**本篇文章主要讲解Python调用OpenCV实现图像位移操作、旋转和翻转效果，包括四部分知识：图像缩放、图像旋转、图像翻转、图像平移。本文分享自华为云社区《[Python图像处理] 六
metal - 旋转，平移和默认相机位置
我只是在玩MTKView中的模板设置；并且，我一直在尝试了解以下内容：相机的默认位置。使用MDLMesh和MTKMesh创建基元时的默认位置。为什么轮换还涉及翻译。相关代码： matrix_f
旋转 ggplot 树状图的标签
我正在尝试使用包 dendexend 创建一个树状图。它创建了非常好的 gg 树状图，但不幸的是，当你把它变成一个“圆圈”时，标签跟不上。我将在下面提供一个示例。我的距离对象在这里:http://s
旋转 ggplot2 绘图对象
我想将一个完整的 ggplot 对象旋转 90°。我不想使用 coord_flip因为这似乎会干扰 scale="free"和 space="free"使用刻面时。例如: qplot(as.fac
人类的 opengl 旋转
我目前可以通过首先平移到轴心点然后执行旋转最后平移回原点来围绕轴心点旋转。在我的例子中，我很容易为肩膀做到这一点。但是，我不知道如何为前臂添加绕肘部的旋转。我已经尝试了以下围绕肘部旋转的前臂: 平移
jQuery 旋转/变换
我想使用此功能旋转然后停止在特定点或角度。现在该元素只是旋转而不停止。代码如下: $(function() { var $elie = $("#bkgimg");
iPhone UIImageView 旋转
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 4 年前。 Improve this ques
iphone - 基本关键帧动画(旋转)
我正在尝试创建一个非常简单的关键帧动画，其中图形通过给定的中点从一个角度旋转到另一个角度。 (目的是能够通过大于 180 度的 OBTUSE 弧角来制作旋转动画，而不是让动画“作弊”并走最短路线，即通
cocoa - 旋转 NSView
我需要旋转 NSView 实例的框架，使其宽度变为其高度，其高度变为其宽度。该 View 包含一个字符串，并且该字符串也被旋转，这一点很重要。我查看了 NSView 的 setFrameRotati

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在球体上旋转玩家相机 (javascript/three.js)