How to use the three.PerspectiveCamera function in three

init()
	{
		var scope = this;
		ImageUtils.crossOrigin = '';

		var orthoScale = 100;
		var orthoWidth = window.innerWidth;
		var orthoHeight = window.innerHeight;

		scope.domElement = scope.element.get(0);

		scope.fpscamera = new PerspectiveCamera(60, 1, 1, 10000 );
		scope.perspectivecamera = new PerspectiveCamera(45, 10, scope.cameraNear, scope.cameraFar);
		scope.orthocamera = new OrthographicCamera(orthoWidth / -orthoScale, orthoWidth /orthoScale, orthoHeight /orthoScale, orthoHeight / -orthoScale, scope.cameraNear, scope.cameraFar);

		scope.camera = scope.perspectivecamera;
// scope.camera = scope.orthocamera;

		scope.renderer = scope.getARenderer();
		scope.domElement.appendChild(scope.renderer.domElement);

		scope.skybox = new Skybox(scope.scene, scope.renderer);

		scope.controls = new OrbitControls(scope.camera, scope.domElement);
		scope.controls.autoRotate = this.options['spin'];
		scope.controls.enableDamping = true;
		scope.controls.dampingFactor = 0.5;
		scope.controls.maxPolarAngle = Math.PI * 0.5;
		scope.controls.maxDistance = 3000;

init() {
    const containerWidth = this._context.container.width;
    const containerHeight = this._context.container.height;

    this._camera = new THREE.PerspectiveCamera(
      50,
      containerWidth / containerHeight,
      rescaleNumber(0.00001),
      rescaleNumber(2000),
    );

    // Controls
    // TODO(ian): Set maxDistance to prevent camera farplane cutoff.
    // See https://discourse.threejs.org/t/camera-zoom-to-fit-object/936/6
    const controls = new OrbitControls(this._camera, this._simulationElt);
    controls.enableDamping = true;
    controls.enablePan = true;
    controls.zoomSpeed = 1.5;
    controls.userPanSpeed = 20;
    controls.rotateSpeed = 2;
    controls.touches = {

export default function() {
  const canvas = document.getElementById('canvas-webgl');
  const renderer = new THREE.WebGLRenderer({
    antialias: false,
    canvas: canvas,
    alpha: true,
  });
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(90, document.body.clientWidth / window.innerHeight, 1, 10000);
  const clock = new THREE.Clock();

  const vectorTouchStart = new THREE.Vector2();
  const vectorTouchMove = new THREE.Vector2();
  const vectorTouchEnd = new THREE.Vector2();

  let isDrag = false;

  //
  // process for this sketch.
  //

  let indexPuddle = 0;
  let timeShowPuddle = 0;
  const puddles = [];
  const showPuddle = (time) => {

// Set up scene.

    this.scene = new THREE.Scene();
    this.scene.background = new THREE.Color(0xffffff);

    // Set up renderer.

    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.renderer.shadowMap.enabled = true;
    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    this.renderer.setSize(this.props.width, this.props.height);

    // Set up camera.

    this.camera = new THREE.PerspectiveCamera(
      45,
      this.props.width / this.props.height,
      0.1,
      1000
    );
    this.camera.position.z = 7;
    this.camera.position.y = 10;
    this.camera.lookAt(new THREE.Vector3());
    this.scene.add(this.camera);

    // Set up lights.

    const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
    this.scene.add(ambientLight);

    const light = new THREE.DirectionalLight(0x555555);

constructor (renderer) {
    // Update the renderer
    this.renderer = renderer
    this.renderer.setClearColor(0x000000, 1)
    this.renderer.setSize(window.innerWidth, window.innerHeight)
    this.renderer.shadowMap.type = PCFSoftShadowMap
    this.renderer.shadowMap.enabled = true

    // Make a camera and position it off center
    this.camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000)
    this.camera.position.z = 500

    // Make a scene, add the camera to it
    this.scene = new Scene()
    this.scene.add(this.camera)

    // Add a cube by making the shape, and the material,
    // and smooshing them together with a mesh
    const cubeGeometry = new BoxGeometry(100, 100, 100)
    const cubeMaterial = new MeshPhongMaterial({color: 0xBE8010})
    this.cube = new Mesh(cubeGeometry, cubeMaterial)
    this.cube.castShadow = true
    this.camera.lookAt(this.cube)
    this.scene.add(this.cube)

    // Mesh lambert material accepts light,

* @author jonaskello / https://github.com/jonaskello
 * Simple example that renders a scene with a cube to a PNG image file.
 */
const THREE = require("three");

// Use either named export or default export
//const SoftwareRenderer = require("../");
const SoftwareRenderer = require("../").SoftwareRenderer;

const PNG = require("pngjs").PNG;
const fs = require("fs");

// Build scene with cube
const width = 1024;
const height = 768;
const camera = new THREE.PerspectiveCamera(75, width / height, 1, 10000);
camera.position.z = 500;
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry(200, 200, 200);
const material = new THREE.MeshBasicMaterial({color: 0xff0000});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// Rotate the cube a bit
mesh.rotation.x += 0.5;
mesh.rotation.y += 0.6;

// Render into pixels-array (RGBA)
const renderer = new SoftwareRenderer();
renderer.setSize(width, height);
var imagedata = renderer.render(scene, camera);

module.exports = function(fov, aspect, near, far, group){

	var projection, current, currentLook;
	var animation = {};
	var prevAnimation = {};
	var status = 'fixed';

	//create camera
	var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
	camera.needsUpdate = false;

	//make public
	var convert = function(pos){

		var converted = group.localToWorld(pos);
		return converted;

	};

	camera.setProjection = function(_projection){

		//save
		projection = _projection;

		//chainable

prepareRendering: function(){

        var width = window.innerWidth,
            height = window.innerHeight;
        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0xe4e4e4, 1);
        renderer.setSize(width, height);
        this.get('element').appendChild(renderer.domElement);

        var camera = new THREE.PerspectiveCamera(45, width/height, 0.1, 10000);
        camera.position.x = 500;
        camera.position.y = 500;
        camera.position.z = 500;

        var scene = new THREE.Scene();

        var light = new THREE.PointLight(0xffffff);
        light.position.set(0, 300, 200);

        var control = new OrbitControls(camera, renderer.domElement);

        scene.add(light);
        scene.add(camera);
        scene.add(this.getPointCloud());

        control.addEventListener('change', function(){

prepareScene() {
    if (this.container === null) {
      this.container = document.getElementById('route_code_map_canvas');
    }

    if (this.camera === null) {
      this.camera = new THREE.PerspectiveCamera(
        27,
        this.width / this.height,
        1,
        10000
      );
      this.camera.up.x = 0;
      this.camera.up.y = 0;
      this.camera.up.z = 1;
      this.scene.add(this.camera);
    }

    if (this.renderer === null) {
      this.renderer = new THREE.WebGLRenderer({ antialias: false });
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.setSize(this.width, this.height);
      this.renderer.gammaInput = true;