- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
WebGL, Three.js and Babylon.js [Three.js] PerspectiveCamera
2017.06.04 14:49
PerspectiveCamera
Camera that uses perspective projection.
This projection mode is designed to mimic the way the human eye sees. It is the most common projection mode used for rendering a 3D scene.
Example
animation / skinning / blending
animation / skinning / blending
var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 ); scene.add( camera );
Constructor
PerspectiveCamera( fov, aspect, near, far )
fov — Camera frustum vertical field of view.
aspect — Camera frustum aspect ratio.
near — Camera frustum near plane.
far — Camera frustum far plane.
Together these define the camera's viewing frustum.
Properties
See the base Camera class for common properties.
#.aspect
Camera frustum aspect ratio, usually the canvas width / canvas height. Default is 1 (square canvas).
#.far
Camera frustum far plane. Default is 2000.
The valid range is between the current value of the near plane and infinity.
#.filmGauge
Film size used for the larger axis. Default is 35 (millimeters). This parameter does not influence the projection matrix unless .filmOffset is set to a nonzero value.
#.filmOffset
Horizontal off-center offset in the same unit as .filmGauge. Default is 0.
#.focus
Object distance used for stereoscopy and depth-of-field effects. This parameter does not influence the projection matrix unless a StereoCamera is being used. Default is 10.
#.fov
Camera frustum vertical field of view, from bottom to top of view, in degrees. Default is 50.
#.isPerspectiveCamera
Used to test whether this or derived classes are PerspectiveCameras. Default is true.
This should not be changed as it is used internally by the renderer for optimisation.
#.near
Camera frustum near plane. Default is 0.1.
The valid range is greater than 0 and less than the current value of the far plane. Note that, unlike for the OrthographicCamera, 0 is not a valid value for a PerspectiveCamera's near plane.
#.view
Frustum window specification or null. This is set using the .setViewOffset method and cleared using .clearViewOffset.
#.zoom
Gets or sets the zoom factor of the camera. Default is 1.
Methods
See the base Camera class for common methods.
#.clearViewOffset ()
Removes any offset set by the .setViewOffset method.
#.getEffectiveFOV ()
Returns the current vertical field of view angle in degrees considering .zoom.
#.getFilmHeight ()
Returns the height of the image on the film. If .aspect is less than or equal to one (portrait format), the result equals .filmGauge.
#.getFilmWidth ()
Returns the width of the image on the film. If .aspect is greater than or equal to one (landscape format), the result equals .filmGauge.
#.getFocalLength ()
Returns the focal length of the current .fov in respect to .filmGauge.
#.setFocalLength ( focalLength )
Sets the FOV by focal length in respect to the current .filmGauge.
By default, the focal length is specified for a 35mm (full frame) camera.
#.setViewOffset ( fullWidth, fullHeight, x, y, width, height )
fullWidth — full width of multiview setup
fullHeight — full height of multiview setup
x — horizontal offset of subcamera
y — vertical offset of subcamera
width — width of subcamera
height — height of subcamera
Sets an offset in a larger frustum. This is useful for multi-window or multi-monitor/multi-machine setups.
For example, if you have 3x2 monitors and each monitor is 1920x1080 and the monitors are in grid like this:
+---+---+---+ | A | B | C | +---+---+---+ | D | E | F | +---+---+---+
then for each monitor you would call it like this:
var w = 1920; var h = 1080; var fullWidth = w * 3; var fullHeight = h * 2; // A camera.setViewOffset( fullWidth, fullHeight, w * 0, h * 0, w, h ); // B camera.setViewOffset( fullWidth, fullHeight, w * 1, h * 0, w, h ); // C camera.setViewOffset( fullWidth, fullHeight, w * 2, h * 0, w, h ); // D camera.setViewOffset( fullWidth, fullHeight, w * 0, h * 1, w, h ); // E camera.setViewOffset( fullWidth, fullHeight, w * 1, h * 1, w, h ); // F camera.setViewOffset( fullWidth, fullHeight, w * 2, h * 1, w, h );
Note there is no reason monitors have to be the same size or in a grid.
#.updateProjectionMatrix ()
Updates the camera projection matrix. Must be called after any change of parameters.
#.toJSON ()
Return camera data in JSON format.
Source
src/cameras/PerspectiveCamera.js
[출처] https://threejs.org/docs/#api/cameras/PerspectiveCamera
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.