control camera.position.x

by fiddleuser01

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/libs/dat.gui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>

<canvas id='canvasId'></canvas>

CSS

canvas{
      height: 100%;
      width: 100%;
    }

JavaScript

const RED = 0xff0000;
const GREEN = 0x00ff00;
const BLUE = 0x0000ff;
const LIMIT = 100;

function initCamera() {
  camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 1, 10000);
  camera.name = 'camera';
  camera.position.set(60,120,130);
  scene.add(camera);
}

function initRenderer() {
  renderer = new THREE.WebGLRenderer({ canvas:canvas});
  renderer.setSize(canvas.width, canvas.height, false); 
}

function initLight(){
  const ambientLight = new THREE.AmbientLight( 0xffffff, 1 );
  ambientLight.name = 'ambientLight';
  scene.add(ambientLight);
}

function initAxes(){
  function makeAxis(start, finish, material, name){
    const points = [start, finish];
    const axisGeometry = new THREE.BufferGeometry().setFromPoints(points);
    const newAxis = new THREE.Line(axisGeometry, material);
    newAxis.name = name;
    scene.add(newAxis);
  }
  const xAxisMaterial = new THREE.LineBasicMaterial({ color: RED });
  const yAxisMaterial = new THREE.LineBasicMaterial({ color: GREEN });
	const zAxisMaterial = new THREE.LineBasicMaterial({ color: BLUE });
  makeAxis(new THREE.Vector3(-LIMIT, 0, 0), new THREE.Vector3(LIMIT, 0, 0), xAxisMaterial, 'xAxis');
  makeAxis(new THREE.Vector3(0, -LIMIT, 0), new THREE.Vector3(0, LIMIT, 0), yAxisMaterial, 'yAxis');
  makeAxis(new THREE.Vector3(0, 0, -LIMIT), new THREE.Vector3(0, 0, LIMIT), zAxisMaterial, 'zAxis');
}

function initTestPerspectiveCamera(){              //  fov, aspect, near, far 
  testPerspectiveCamera = new THREE.PerspectiveCamera( 45,  2,      20,   100 );                               
  testPerspectiveCamera.name = 'testPerspectiveCamera';
  testPerspectiveCamera.position.set(40,0,0);
  testPerspectiveCamera.lookAt(0, 100, 0);          //lookAt is a method of Object£D
  testPerspectiveCameraHelper = new THREE.CameraHelper( testPerspectiveCamera );
  testPerspectiveCameraHelper.name = 'testPerspectiveCameraHelper';
  scene.add(testPerspectiveCameraHelper);
}

function initGui(){
 ...