CODEWITHSUNDEEP
javascriptthree.js3d
Jerry_0x04bc
Jerry_0x04bc

Reputation: 63

block the movement along z axis in three js

I'm creating a game level page using three js. Here I used mapcontrols for user control. In this when I click and drag any part of the screen, the object gets translated (as per my wish). But when I move along the Z axis, the objects move along z-axis which I need to block.

I just want to make the scene like a horizontal carousel in normal html (literally) I tried some properties of OrbitControls which is given in threejs docs. 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;

Upvotes: 0

Views: 2076

Answers (1)

jscastro
jscastro

Reputation: 3780

To create a carousel-like experience, you don't need orbit controls, you only need to move the camera while looking at your object is advancing through the carousel, like the typical platform games.

I have created this fiddle with an example with an sphere moving along the x axis and the camera following it. enter image description here

and the relevant code is basically on the render method:

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

If you want to still playing with OrbitControls and fix the axes, you need to play with minPolarAngle and maxPolarAngle, that will block vertical axis if you set the same value for both.

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

but that gives no perspective at all, so I would use:

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

enter image description here

Then you have to play with the horizontal perspective, for that you need to set minAzimuthAngle and maxAzimuthAngle between -2 PI and +2 PI...:

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

This will slightly turn your camera angle: enter image description here

Then, using only OrbitControls you will need to move the rest of the objects in the scene, so instead of moving the sphere, you will need to move conceptually the "floor".

If this solution solves your question, please mark the answer as answer accepted, in that way it will also help other users to know it was the right solution.

Upvotes: 1

Related Questions