搜索
搜索

在球体上旋转玩家相机（javascript/three.js）

MirrorMirror 发表于 Dev
14
镜子镜子

我试图让一个玩家在一个星球上的第一人称视角中行走，在 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/

我会很感激你帮助解决这个问题。先感谢您

疯兔76

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

连接到播放器的摄像头 [...]

简化事物并附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.quaternionthis.keyarrowupthis.keyarrowdown

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用Three.js在本地轴上旋转相机X

chartist js在x轴上旋转标签

js游戏中的相机，跟随玩家

.babylon js 文件相机旋转

如何调整Three.js透视相机的视场以适合球体？

在 p5.js 画布上旋转和绘制

角度图像的写入量在织物js画布上旋转

ThreeJS：在y轴上旋转以面对相机

Three.js-相机旋转和TransformControls

相对于相机旋转滚动球体

当对象旋转时Three.js旋转相机

旋转相机向量以查看玩家Unity

照相机移动时，Three.js r73合并球体几何消失

在按钮上旋转 3D 对象单击 Three.js

在Three.js中任意位置的特定轴上旋转对象-包括网格外部

三个Js在Y轴上旋转网格以面向特定的矢量位置

Three.js旋转相机以外的所有物体

用鼠标在Three.js中旋转相机

在three.js中旋转相机无法正常工作

旋转相机后，Three.js Skybox似乎坏了

Three.js将相机旋转为椭圆形

Three.JS通过移动设备围绕对象旋转相机

three.js-围绕球体旋转矩形精灵，以保持最小接近度

在three.js中根据鼠标位置旋转球体x轴

如何在Three.js中绕立方体旋转球体

three.js-如何围绕lookAt（object）和相机位置之间的线旋转相机

JS-检测设备是否在其中一个轴（X，Y，Z）上旋转超过阈值度

使用具有特定功能的three.js在表面上旋转多维数据集

Three.js-当摄像机旋转90度角时，为什么在x轴和z轴上旋转具有相同的效果？

TOP 榜单

  1. 1

    IE 11中的FormData未定义

  2. 2

    如何一次从多个文本框中获取值？

  3. 3

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  4. 4

    OpenCv：改变 putText() 的位置

  5. 5

    Redux动作正常，但减速器无效

  6. 6

    如何从JavaScript中的MP3文件读取元数据属性？

  7. 7

    如何使用Redux-Toolkit重置Redux Store

  8. 8

    将加号/减号添加到jQuery菜单

  9. 9

    OpenGL纹理格式的颜色错误

  10. 10

    获取并汇总所有关联的数据

  11. 11

    超过时间限制错误C ++

  12. 12

    ActiveModelSerializer仅显示关联的ID

  13. 13

    在交互式Python Shell中获得最后结果

  14. 14

    如何开始为Ubuntu开发

  15. 15

    去噪自动编码器和常规自动编码器有什么区别？

  16. 16

    Excel 2016图表将增长与4个参数进行比较

  17. 17

    算术中的c ++常量类型转换

  18. 18

    使用因子时如何在y轴上的ggplot中插入count或％

  19. 19

    TreeMap中的自定义排序

  20. 20

    如何在R中转置数据

  21. 21

    在 React Native Expo 中使用 react-redux 更改另一个键的值

热门标签

归档