Three dimensional space observation of three. js

Perspective projection camera

PerspectiveCamera( fov, aspect, near, far )

Let’s take a look at what each parameter means, using the following diagram.

Perspective fov: this is the most difficult to understand, my understanding is that the Angle of the eyes open, that is, the size of the Angle of view, if set to 0, rather you close your eyes, so what also can’t see, if for 180, you can think your vision is very broad, but at the time of 180 degrees, often object is very small, because he are smaller proportion of your whole viewing area.
How about this one, which is the distance to the surface near you. In addition, it can also be regarded as the distance of the close distance of the eyes. Suppose it is 10 meters away, please do not set it to negative value, because it is silly, I do not know how to calculate it.
How about this one, which is your far plane.
Aspect ratio Aspect: The aspect ratio of the actual window, i.e. width divided by height. The higher the value, the wider you are, the more likely you are to be watching a wide-screen movie. If the value is less than 1, the more likely you are to be seeing an LED screen like the one shown below.

Orthographic camera

OrthographicCamera( left, right, top, bottom, near, far )

Let’s take a look at what each parameter means, using the following diagram.

1. Left parameter

Left: The vertical distance between the left plane and the camera center. As you can see, the left plane is the plane inside the screen.

2. Right parameter

Right: the vertical distance between the right plane and the camera center. As you can see, the plane on the right is the plane that’s a little bit outside of the screen.

3. Top parameter

Top: vertical distance between the top plane and the camera center. The top plane in the figure above is the plane of the cuboid head upside down.

4, bottom parameter

Bottom: The vertical distance between the bottom plane and the camera center. The bottom plane is the plane that faces the ground.

5. Near parameters

Near: Vertical distance from the camera center. The near plane is the plane standing on the left.

6. Far parameters

Far: vertical distance of the far plane from the camera center. The far plane is the vertical plane on the right.

demo

The perspective camera

var scene = new THREE.Scene() 
// If you set 1 to 5, you will find that the model is invisible, and the observation point is inside the material
var camera = new THREE.PerspectiveCamera(75.window.innerWidth/window.innerHeight, 1.1000)
var renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setClearColor('#ffffff')

document.body.append(renderer.domElement)
  var geometry = new THREE.CubeGeometry(2.2.2)
  var material = new THREE.MeshBasicMaterial({
  color: 0xff0000
})
var cube = new THREE.Mesh(geometry, material)
scene.add(cube)
camera.position.z = 5 // Camera z-axis position
function render () {
  cube.rotation.z += 0.1
  requestAnimationFrame(render)
  renderer.render(scene, camera)
}
render()
Copy the code

Three dimensional space observation of three. js