Prevent the motion on the z-axis in Three.js

Question

Prevent the motion on the z-axis in Three.js

Currently, I am designing a game level page using Three.js. I have incorporated map controls for user manipulation. However, I am facing an issue where the object moves along the Z-axis when I drag it, which is something I want to restrict.

My goal is to create a scene resembling a horizontal carousel in a traditional HTML layout. I have experimented with the properties of OrbitControls as mentioned in the Three.js documentation.

Below is the code snippet I have tested:

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;

javascript three.js 3d

Answer 1

Answer №1

To achieve a carousel-like experience, orbit controls are not necessary. Simply move the camera while focusing on the object as it progresses through the carousel, similar to platform games.

Check out this example on fiddle where a sphere moves along the x-axis with the camera following it. https://i.sstatic.net/2hXpN.png

The key code is in 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 use OrbitControls and adjust the axes, manipulate minPolarAngle and maxPolarAngle to restrict the vertical movement:

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

For horizontal perspective, set minAzimuthAngle and maxAzimuthAngle within -2 PI and +2 PI:

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

By adjusting OrbitControls, you will need to move other objects in the scene instead of the sphere, such as the "floor".

If this solution resolves your query, kindly mark it as answer accepted to assist other users in finding the correct solution.

Answer 2

To achieve a carousel-like experience, orbit controls are not necessary. Simply move the camera while focusing on the object as it progresses through the carousel, similar to platform games.

Check out this example on fiddle where a sphere moves along the x-axis with the camera following it. https://i.sstatic.net/2hXpN.png

The key code is in 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 use OrbitControls and adjust the axes, manipulate minPolarAngle and maxPolarAngle to restrict the vertical movement:

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

For horizontal perspective, set minAzimuthAngle and maxAzimuthAngle within -2 PI and +2 PI:

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

By adjusting OrbitControls, you will need to move other objects in the scene instead of the sphere, such as the "floor".

If this solution resolves your query, kindly mark it as answer accepted to assist other users in finding the correct solution.

Prevent the motion on the z-axis in Three.js

Answer №1

Similar questions

Use jQuery to generate and add several elements to the DOM

What specific blur algorithm is utilized by the Flash platform within their blur filter implementation?

What is the best way to handle exceptions when dealing with MongoDB?

Issue with Firefox causing Bootstrap form to appear incorrectly

What is the best way to send JavaScript data to PHP?

Accessing a component's function from an HTML view in a Vue application

Encountering the issue: receiving an error message stating that shuffle(...) is undefined within

Using jQuery or JavaScript in an ASP.NET environment, you can make the parent list item of a dropdown link active

Are you in the business of building JavaScript hubs?

Display a specific paragraph inside a div using jQuery

Numerous Cycles Stemming from a Single Answer

Creating an array of objects by parsing JSON using the jQuery .each() method

Is it possible to utilize both the /app and /pages folders in my Next 13 application?

JavaScript - AJAX Call Terminated after a Period on Secure Socket Layer (SSL)

What is the best way to add an element directly following another within the document's head section?

What is the impact of a floated element on vertical spacing?

I am experiencing issues with my local MongoDB database not properly storing data when using Express and Mongoose

Tap the mobile menu button twice to toggle the menu

Prevent the Rain from descending

The TypeScript compiler generates a blank JavaScript file within the WebStorm IDE