CODEWITHSUNDEEP
javascriptthree.jscameracontrols
user10787392
user10787392

Reputation:

Orbit controls; Angle clamping

I've been working on a mini project recently for a visuals I want to develop and I'm having issues being able to limit the camera rotation based on the Y axis rotation, and I don't quite know why or how I'm having this issue.

I've looked around and all I can find is people wanting to remove the angle clamp, and they always seem to refer to minAzimuthAngle or maxAzimuthAngle, but I can't seem to get it to do anything.

// controls.minAzimuthAngle = -Math.PI, controls.maxAzimuthAngle = Math.PI

I'm just asking here as I can't find much elsewhere to explain my problem. I'm thinking it's just the specifically the way I'm using or rendering the camera but it's hard to find any reference to clamping the angles other than unclamping them.

var renderer, scene, camera;                                                      // scene render var creation
var orbitalControl = new THREE.OrbitControls(camera, renderer);                   //orbitcontrol setup
var controls = new THREE.OrbitControls( camera, renderer);                        // camera to renderer
    controls.addEventListener( 'change', render );                                //control listening

  scene = new THREE.Scene(), camera;                                              // scene creation
  var W = window.innerWidth, H = window.innerHeight;                              // scene size
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000);
  camera.position.set(0, 0, 400);                                                 // camera assignment
  camera.up = new THREE.Vector3(0,500,0);

  controls = new THREE.OrbitControls(camera);                                     // centeralising the camera
  controls.target = new THREE.Vector3(500, 200, 500);                             // controls
  controls.addEventListener('change', render);                                    // renderer based on controls

  scene.add(camera);                                                              // camera to scene
  controls.addEventListener( 'change', render );                                  // control adjustments
  controls.screenSpacePanning = false;
  controls.enableDamping = true, controls.dampingFactor = 0.25;
  controls.enableZoom = false, controls.autoRotate = false;   

  controls.minPolarAngle = Math.PI / 2 ; // radians
  controls.maxPolarAngle = Math.PI / 2 // radians
  controls.minAzimuthAngle = -Math.PI * 0.5;
    controls.maxAzimuthAngle = Math.PI * 0.5;

  controls.addEventListener("change", () => {
  if (this.renderer) this.renderer.render(this.scene, camera)});

regardless of whatever I change the min or max AzimuthAngle, it doesn't do anything, but it's the only thing I'm referred to from any other posts.

is there something conflicting with the way I'm trying to render this? I genuinelly have no clue what the issue is.

Thanks in advance for anyone who responds

github link to the entire project; https://github.com/Thealonic/GENESIS

Upvotes: 1

Views: 1865

Answers (1)

Mugen87
Mugen87

Reputation: 31076

I'm having issues being able to limit the camera rotation based on the Y axis rotation,

In this case, you have to configure minAzimuthAngle and maxAzimuthAngle. Keep in mind that you can only use values in the range [ - Math.PI, Math.PI ]. Check out how the following example restricts how far you can orbit horizontally.

var mesh, renderer, scene, camera, controls;

init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setPixelRatio( window.devicePixelRatio );
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();
    
    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 20, 20, 20 );

    // controls
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.minAzimuthAngle = 0;
    controls.maxAzimuthAngle = Math.PI * 0.5;
    
    // ambient
    scene.add( new THREE.AmbientLight( 0x222222 ) );
    
    // light
    var light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position.set( 20,20, 0 );
    scene.add( light );
    
    // axes
    scene.add( new THREE.AxesHelper( 20 ) );

    // geometry
    var geometry = new THREE.SphereGeometry( 5, 12, 8 );
    
    // material
    var material = new THREE.MeshPhongMaterial( {
        color: 0x00ffff, 
        flatShading: true,
        transparent: true,
        opacity: 0.7,
    } );
    
    // mesh
    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
    
}

function animate() {

    requestAnimationFrame( animate );
    renderer.render( scene, camera );

}
body {
  margin: 0;
}
canvas {
  display: block;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>

Upvotes: 2

Related Questions