Three.js Understanding of Camera, Perspective

Keywords: network

Three.js Understanding of Camera, Perspective

Also note: This series of articles is only the author's learning experience for understanding threejs and WebGL, and the learning path is also from WebGL Chinese Network Income from school, if the above websites identify infringement or illegitimate violation of their interests, please contact the author (PS: Please don't say goodbye to me), other reproducers should be responsible for the impact, not related to me

Okay, this statement also declares that I am new to thre.js. Writing is also for recording understanding. Writing is wrong. Critics and corrections are also welcome.

By WebGL Chinese Network The first three chapters of the elementary tutorial.
Know that there are four most important building scene s, camera s, renderer s, and geometries in 3D applications
Scene renderer geometry is easy to understand, let's talk more about cameras here

This is the camera's constructor

//fov stands for perspective
//Aspect aspect ratio
//near recently saw
//Farthest sight
var camera = PerspectiveCamera( fov, aspect, near, far )
//This confirms the distance near the plane in the camera
camera.position.z = 5;

Also be aware that the right-handed coordinate system is used here (I also tested it by listening to the video teacher)

Study code attached

<script>

    var scene = new THREE.Scene();

    var camera = new THREE.PerspectiveCamera(75,
    window.innerWidth/(window.innerHeight),
    0.1,
    1000);

    var renderer = new THREE.WebGLRenderer();

    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);
    var geometry = new THREE.CubeGeometry(1,1,1);
    var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
    var cube = new THREE.Mesh(geometry, material); 
    scene.add(cube);
    var z = 5;
    var z1 = true;
     camera.position.z = z;
    camera.position.y = 1.5;
    camera.position.x = -1.5;
    function render() {
        requestAnimationFrame(render);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        cube.rotation.z += 0.01;

        if(z1 == null){
            z1 = z;
        }
        if(z > 50){
            z1 = false;
        }else if(z < 5){
            z1 = true;
        }
        if(z1){
            z = z + 0.1;
        }else{
            z = z - 0.1;
        }

        camera.position.z =z;

        renderer.render(scene, camera);
    }
    render();
</script>

Posted by clanstyles on Sat, 04 Jan 2020 07:21:25 -0800