阻止三个js中沿z轴的移动

Question

我正在使用三个 js 创建一个游戏关卡页面。这里我使用了mapcontrols来进行用户控制。在这种情况下，当我单击并拖动屏幕的任何部分时，对象就会被翻译（按照我的意愿）。但是当我沿 Z 轴移动时，对象沿 z 轴移动，我需要阻止它。

我只是想让场景像普通的水平旋转木马一样html（字面意思）我尝试了 threejs 文档中给出的 OrbitControls 的一些属性。 https://threejs.org/docs/index.html#examples/en/controls/OrbitControls

Here is the code I tried

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );

var mapControls = new THREE.MapControls( camera, renderer.domElement );
mapControls.enableDamping = true;
mapControls.enableRotate = false;
mapControls.enableZoom = false;

Answer 1

要创建类似旋转木马的体验，您不需要轨道控制，只需移动相机，同时看着您的物体在旋转木马中前进，就像典型的平台游戏一样。

我创建了这个 fiddle with an example，球体沿 x 轴移动，相机跟随它。

相关代码基本在render方法上：

function render() {
    requestAnimationFrame(render);
    mesh.position.x -= 0.1;
    camera.lookAt(mesh.position);
    camera.position.x -= 0.1;
    renderer.render(scene, camera);
}

如果你想继续玩 OrbitControls 并固定轴，你需要玩 minPolarAngle 和 maxPolarAngle，如果你设置相同的值，那会阻止垂直轴对于两者。

  controls.maxPolarAngle = Math.PI / 2;
  controls.minPolarAngle = Math.PI / 2;

但这根本没有给出任何观点，所以我会使用：

  controls.maxPolarAngle = Math.PI / 2.2;
  controls.minPolarAngle = Math.PI / 2.2;

然后你必须玩水平视角，为此你需要在 -2 PI 和 +2 PI 之间设置 minAzimuthAngle 和 maxAzimuthAngle...:[=24=]

  controls.minAzimuthAngle  = -Math.PI * 1.1;
  controls.maxAzimuthAngle = Math.PI * 1.1;

这会稍微改变你的相机角度：

然后，仅使用 OrbitControls 您将需要移动场景中的其余对象，因此您需要移动概念上的“地板”而不是移动球体。

如果此解决方案解决了您的问题，请将答案标记为答案已接受，这样它也会帮助其他用户知道这是正确的解决方案。

阻止三个js中沿z轴的移动

block the movement along z axis in three js

javascript

3d

three.js