TypeScript THREE.PerspectiveCamera类代码示例

export function createCamera(fov: number, aspect: number, position: THREE.Vector3, up: THREE.Vector3): THREE.PerspectiveCamera {
  const camera = new PerspectiveCamera(fov, aspect, 1, 10000);
  assign(camera.position, position);
  assign(camera.up, up);
  camera.lookAt( new Vector3(0, 0, 0) );
  return camera;
}

        super(container, motionTracker, (scene: Scene, renderer: WebGLRenderer) => {
            var camera = new PerspectiveCamera(100, window.innerWidth / window.innerHeight, 50, 1000000);
            scene.add(camera);
            scene.add(new AmbientLight(0xffdddd, 0.1))
            camera.position.z = 0;
            camera.lookAt(new Vector3(0, 0, 500));
            light = new SpotLight(0xffffff, 1, 7000, 0.6, 1, 2);
            light.add(new PointLight(0xffffff, 0.4, 5000));
			scene.add(light);

            return camera;
        }, () => {

    initCubeScene() {
        var camera, scene, renderer;
        var mesh;

        camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 400;
        scene = new THREE.Scene();
        //var texture = new THREE.TextureLoader().load('textures/crate.gif');
        var geometry = new THREE.BoxBufferGeometry(200, 200, 200);
        //var material = new THREE.MeshBasicMaterial({ map: texture });
        mesh = new THREE.Mesh(geometry);
        scene.add(mesh);
        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        window.addEventListener('resize', onWindowResize, false);
        
        animate();

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
        
        function animate() {
            requestAnimationFrame(animate);
            mesh.rotation.x += 0.005;
            mesh.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
    }

 // handleKeys() {
 //   if (this.keys.KeyA === true) {
 //     camera.position.x -= 5;
 //   }
 //   if (this.keys.KeyD === true) {
 //     camera.position.x += 5;
 //   }
 // }
 createCamera() {
   this.HEIGHT = window.innerHeight;
   this.WIDTH = window.innerWidth;
   this.aspectRatio = this.WIDTH / this.HEIGHT;
   this.fieldOfView = 60;
   this.nearPlane = 1;
   // How far the camera can reach
   this.farPlane = 10000;
   var camera = new THREE.PerspectiveCamera(
     this.fieldOfView,
     this.aspectRatio,
     this.nearPlane,
     this.farPlane
   );
   camera.position.x = 0;
   camera.position.z = -1000;
   camera.position.y = 1000;
   camera.lookAt(new THREE.Vector3(0, 0, 0));
   return camera;
 }

import * as THREE from "three";

const camera = new THREE.PerspectiveCamera(50, 4 / 3, 0.1, 100);
camera.position.z = 16;
camera.position.y = 8.5;
camera.setRotationFromEuler(new THREE.Euler(-Math.PI / 8, 0, 0));

export default camera;

// Set some camera attributes.
const VIEW_ANGLE = 45;
const ASPECT = WIDTH / HEIGHT;
const NEAR = 0.1;
const FAR = 10000;
const BACKGROUND_COLOR = 0xF0F0F0;
const SNAKE_COLOR = 0x00FF00;
const LIGHT_COLOR = 0xFFFFFF;

// Create a WebGL renderer, camera
// and a scene
const renderer = new WebGLRenderer();
const camera =
    new PerspectiveCamera(
        VIEW_ANGLE,
        ASPECT,
        NEAR,
        FAR
    );

const scene = new Scene();

// Add the camera to the scene.
scene.add(camera);

// Start the renderer.
renderer.setSize(WIDTH, HEIGHT);

// Attach the renderer-supplied
// DOM element.
document.body.appendChild(renderer.domElement);

function init() : void {
  scene = new THREE.Scene()
  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 )
  scene.add(camera)
  const crosshair = new THREE.Mesh(
    new THREE.RingGeometry( 0.02, 0.04, 32 ),
    new THREE.MeshBasicMaterial( {
      color: 0xffffff,
      opacity: 0.5,
      transparent: true
    } )
  )
  crosshair.position.z = - 2
  camera.add(crosshair)
  room = new THREE.Mesh(
    new THREE.BoxGeometry(6, 6, 6, 10, 10, 10),
    new THREE.MeshBasicMaterial({ color: 0x202020, wireframe: true })
  )

  scene.add(room)
  scene.add(new THREE.HemisphereLight(0x404020, 0x202040, 0.5))

  const light = new THREE.DirectionalLight(0xffffff)
  light.position.set(1, 1, 1).normalize()
  scene.add(light)

  const geometry = new THREE.BoxGeometry( 0.15, 0.15, 0.15 )
  for(let i = 0; i < 200; i++) {
    const object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) )
    object.position.x = Math.random() * 4 - 2
    object.position.y = Math.random() * 4 - 2
    object.position.z = Math.random() * 4 - 2
    object.rotation.x = Math.random() * 2 * Math.PI
    object.rotation.y = Math.random() * 2 * Math.PI
    object.rotation.z = Math.random() * 2 * Math.PI
    object.scale.x = Math.random() + 0.5
    object.scale.y = Math.random() + 0.5
    object.scale.z = Math.random() + 0.5
    object.userData.velocity = new THREE.Vector3()
    object.userData.velocity.x = Math.random() * 0.01 - 0.005
    object.userData.velocity.y = Math.random() * 0.01 - 0.005
    object.userData.velocity.z = Math.random() * 0.01 - 0.005
    room.add( object )
  }
  raycaster = new THREE.Raycaster()


  // renderer = new THREE.WebGLRenderer({ antialias: true })
  // renderer.setClearColor(0x101010)
  // renderer.setPixelRatio(window.devicePixelRatio)
  // renderer.setSize(window.innerWidth, window.innerHeight)
  // renderer.sortObjects = false

  renderer2 = new CSS3DRenderer()
  renderer2.setSize(window.innerWidth, window.innerHeight)
  renderer2.domElement.style.position = 'absolute'
  renderer2.domElement.style.top = '0'

  const container = document.createElement('div')
  document.body.appendChild(container)
  // container.appendChild(renderer.domElement)
  container.appendChild(renderer2.domElement)

  controls = new VRControls(camera, e => console.error(e))
  // effect = new VREffect(renderer, (err : string) => console.error('VREffect: ' + err) )
  effect2 = new CSS3DVREffect(renderer2, (err : string) => console.error('CSS3DVREffect: ' + err))


  // CSS Object
  const element = document.createElement('div')
  element.innerHTML = 'Plain text inside a div.'
  element.className = 'three-div'
  
  const div = new CSSObject3D(element)
  div.position.x = 0
  div.position.y = 0
  div.position.z = -185
  div.rotation.y = 0
  // div.rotation.y = Math.PI
  scene.add(div)

  if(WebVR.isAvailable()) {
    // document.body.appendChild(WebVR.getButton(effect))
    document.body.appendChild(WebVR.getButton(effect2))
  }
  // renderer.domElement.addEventListener('mousedown', onMouseDown, false)
  // renderer.domElement.addEventListener('mouseup', onMouseUp, false)
  // renderer.domElement.addEventListener('touchstart', onMouseDown, false)
  // renderer.domElement.addEventListener('touchend', onMouseUp, false)

  renderer2.domElement.addEventListener('mousedown', onMouseDown, false)
  renderer2.domElement.addEventListener('mouseup', onMouseUp, false)
  renderer2.domElement.addEventListener('touchstart', onMouseDown, false)
  renderer2.domElement.addEventListener('touchend', onMouseUp, false)

  window.addEventListener('resize', onWindowResize, false)
}

// add styles
import './style.css'
// three.js
import * as THREE from 'three'

// create the scene
let scene = new THREE.Scene()

// create the camera
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

let renderer = new THREE.WebGLRenderer()

// set size
renderer.setSize(window.innerWidth, window.innerHeight)

// add canvas to dom
document.body.appendChild(renderer.domElement)

// add axis to the scene
let axis = new THREE.AxesHelper(10)

scene.add(axis)

// add lights
let light = new THREE.DirectionalLight(0xffffff, 1.0)

light.position.set(100, 100, 100)

scene.add(light)

  public onResize() {
    const width = this.container.clientWidth;
    const height = this.container.clientHeight;

    this.camera.aspect = width / height;
    this.camera.updateProjectionMatrix();

    this.renderer.setSize(width, height);
  }

function onWindowResizeClouds() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
}