堆棧內存溢出
  簡體   English   中英

在球體上旋轉球員相機（javascript / three.js）

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

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

問題描述

我想讓一個玩家在一個星球的第一人稱視角中走，在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 個解決方案

解決方案1
 1 已采納  2019-02-22 11:34:13

解決方案在您的問題中編碼：

連接到播放器的相機[...]

簡化事物並將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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Three.js 繞球體旋轉立方體 Three.js：相機在球體周圍飛舞？ Three.js旋轉相機音調不起作用？ 在three.js中圍繞球體旋轉矢量（模擬太陽） Three.js - 圍繞某個軸旋轉球體 Three.js球體 Three.js旋轉球體，然后跟着鏡頭 旋轉相機后，Three.js Skybox似乎壞了 在Three.js中使用軌道控制旋轉相機時發生奇怪的晃動 Three.js中具有紋理的球體
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM