当前位置：网站首页>Three. JS introductory learning notes 03: perspective projection camera

Three. JS introductory learning notes 03: perspective projection camera

2022-07-07 15:48:00 【Jiang Duoduo_ Mostly Harmless 】

Reference Content ：
https://www.ituring.com.cn/book/miniarticle/49446

## Perspective projection camera
Different from orthogonal projection , The size of an object is not affected by distance , Perspective projection is more in line with physical vision , Near and far away .
structure ：

var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

Insert picture description here
Gray is the visual body , Parts that can be rendered ,fov Is the angle in the vertical direction of the visual body （ Angle system ）.

Code 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3d_camera</title>
<script type="text/javascript" src="js/three.js"></script>
</head>

<body>
<script type="text/javascript">
    //renderer
// 
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(400, 300);
// 
        document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
    //scene
        var scene = new THREE.Scene();
    
    //camera
        var camera = new THREE.PerspectiveCamera(45, 400 / 300, 1, 10);
        camera.position.set(0, 0, 5);
        scene.add(camera);
    
    //cube

          var cube = new THREE.Mesh(new THREE.CubeGeometry(1,1,1),
            new THREE.MeshBasicMaterial({
    
            color:0xff0000,
            wireframe:true
            
        })                         
                                  
    );
    scene.add(cube);
    
    //render
         renderer.render(scene, camera);
       
</script>
</body>
</html>

Insert picture description here
fov Change to 60 The effect is as follows ：
Insert picture description here
fov Change to 60 in the future ,cube Instead, it shrinks , As shown in the figure below , Although the actual size of the cube has not changed , But when the vertical angle of the camera is set larger , The visual body has become larger , Therefore, the size of the cube relative to the whole visual body becomes smaller , The square looks smaller .

in other words ,canvas The drawn area is still wide 400 high 300, This size has not changed , After the scene volume increases , Projected on the original width 400 high 300 In the drawing area , it seems cube It shrinks .

change fov It will not cause the horizontal and vertical proportion of the picture to change , And change aspect Will change the horizontal and vertical proportions . This effect is similar 2.3 section , The description will not be repeated here .
Insert picture description here

The size of the rendered object is a relative change .

原网站

版权声明
本文为[Jiang Duoduo_ Mostly Harmless ]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202130610087442.html

边栏推荐

猜你喜欢

随机推荐