堆栈内存溢出
  简体   繁体   English

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

[英]rotating player camera on a sphere (javascript/three.js)

 原文  2019-02-19 12:58:35  2   1    javascript/ three.js/ rotation/ quaternions

问题描述

I'm trying to have a player walk in a first person view on a planet, in three.js / javascript. 我想让一个玩家在一个星球的第一人称视角中走，在three.js / javascript中。 In what I'm coding I want two things: 在我编码中我想要两件事：

a) A player to properly move around a planet, with two movement types: rotation around himself (left-right and A/D buttons) and moving forward of backward (W/S buttons). a）玩家可以在行星周围正确移动，有两种移动类型：绕自己旋转（左右和A / D按钮）和向后移动（W / S按钮）。 With help from this thread https://gamedev.stackexchange.com/questions/59298/walking-on-a-sphere I have managed to accomplish this. 在这个帖子的帮助下https://gamedev.stackexchange.com/questions/59298/walking-on-a-sphere我设法完成了这个。

b) A camera attached to the player should rotate horizontally (perpendicular to the plane the player is) when the player rotates around himself (A/D buttons) and the camera should move from 0 (nadir) to 180 (zenith) degrees - meaning player looks up and down, with the Arrow Up/ Arrow Down buttons (eventually with mouse, but that will come at a later point). b）当玩家围绕自己（A / D按钮）旋转时，连接到播放器的相机应水平旋转（垂直于播放器所在的平面），相机应从0（最低点）移动到180度（天顶）度 - 意思是玩家向上和向下看，箭头向上/向下箭头按钮（最终用鼠标，但稍后会出现）。

I have a problem with b, it correctly rotates initially but as the player moves on, the camera jumps in some other position. 我有一个问题b，它最初正确旋转但是当玩家继续前进时，相机会跳到另一个位置。

In order to help me "debug" the problem I have created an ArrowHelper object which should eventually be our camera. 为了帮助我“调试”问题，我创建了一个最终应该是我们相机的ArrowHelper对象。

html: 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>

I have made some efforts - I'm not really good with quaternions - but nothing seems to work. 我做了一些努力 - 我对四元数并不是很好 - 但似乎没有任何效果。 You can see at this point // TRIAL AND ERRORS HERE my various rotation efforts commented out as none of them will work (including the not commented out). 你可以在这一点上看到// TRIAL AND ERRORS HERE我的各种轮换工作被注释掉，因为它们都不起作用（包括没有注释掉）。

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

I would appreciate your help in solving this issue. 感谢您帮助我解决这个问题。 Thank you in advance 先感谢您

1 个解决方案

解决方案1
 1 已采纳  2019-02-22 11:34:13

The solution is the encoded in your question: 解决方案在您的问题中编码：

A camera attached to the player [...] 连接到播放器的相机[...]

Simplify things and attach arrowHelper to g_Game.cubePlayer . 简化事物并将arrowHelper附加到g_Game.cubePlayer 。 This means arrowHelper has to be a child of g_Game.cubePlayer rather than the THREE.Scene() : 这意味着arrowHelper必须是一个孩子g_Game.cubePlayer而非THREE.Scene() 

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

This causes that arrowHelper is always at the same position relative to the g_Game.cubePlayer . 这导致arrowHelper始终位于相对于g_Game.cubePlayer的相同位置。 In this case the relative position is THREE.Vector3( 0, 0, 0 ) . 在这种情况下，相对位置是THREE.Vector3( 0, 0, 0 ) 。

arrowHelper.quaternion only contains the relative orientation of arrowHelper . arrowHelper.quaternion只包含的相对方位arrowHelper 。
It is sufficient to update arrowHelper.quaternion in case of this.keyarrowup or this.keyarrowdown : 在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);
    }
}

See the example, where I applied the changes to your original code: 请参阅示例，我将更改应用于原始代码： 

 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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Three.js 绕球体旋转立方体 - Three.js rotating a cube around a sphere Three.js：相机在球体周围飞舞？ - Three.js: Camera flying around sphere? Three.js旋转相机音调不起作用？ - Three.js Rotating camera pitch not working? 在three.js中围绕球体旋转矢量（模拟太阳） - Rotating a vector around a sphere (simulating sun) in three.js Three.js - 围绕某个轴旋转球体 - Three.js - Rotating a sphere around a certain axis Three.js球体 - Three.js sphere Three.js旋转球体，然后跟着镜头 - Three.js rotate a sphere that's followed by a camera 旋转相机后，Three.js Skybox似乎坏了 - Three.js skybox seems broken after rotating camera 在Three.js中使用轨道控制旋转相机时发生奇怪的晃动 - Strange shaking while rotating the camera with Orbit Controls in Three.js Three.js中具有纹理的球体 - A sphere with texture in Three.js
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM