Three. JS introductory learning notes 00: coordinate system, camera (temporarily understood)

I didn't understand some problems in learning orthographic camera thoroughly , Sort out the temporary understanding here , I'll fix it later , Xiaobai is one , If you have any mistakes, please correct them .

One . Coordinate system

The world coordinate system is the right-hand coordinate system ,X Forward right ,Y The shaft is upward ,Z The axis extends from the inside of the screen to the outside .

Rotate around the axis

The thumb points in the positive direction of the rotation axis , The direction of four fingers bending is the positive direction of rotation

cube.rotaion.y -= 0.01; // radian 

Local coordinates

The coordinates of the object , At the center of the object .

Auxiliary coordinate axes can be added

var axisHelper = new THREE.AxisHelper(4);
axisHelper.rotation.y -=0.01;// Axis rotation 
scene.add(axisHelper)

blue ：z Axis
red ：x Axis
green ：y Axis

Two . Camera location

The camera defaults to the origin of the coordinate system , Look at Z Axis negative half axis
camera.postion： Where the camera is , The default is （0,0,0）
camera.lookAt： Camera focus direction , The default is Z Axis negative half axis direction

Focus the camera on a certain point

camera.lookAt(new THREE.Vector3(x,y,z))

The camera tracks an object

camera.lookAt(mesh.position)

orthogonal
The six parameters represent the positions of the six planes captured by the orthogonal projection camera .
among ,near Indicates the vertical distance between the near plane and the center point of the camera ;far Indicates the vertical distance between the far plane and the center point of the camera .

perspective

3、 ... and . Location relationship

<script type="text/javascript">
    //renderer
        var renderer = new THREE.WebGLRenderer();
            renderer.setSize(400, 300);
            canvas, No more definition canvas Elements 
            document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
            
    
    //scene
        var scene = new THREE.Scene();
    
    //camera
        var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 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);
    function animate(){
    
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render( scene, camera);
        requestAnimationFrame( animate );
    }
        animate();
    
</script>

I understand the positional relationship of the above code , I don't know if it's right
Blue numbers are length , Black numbers are coordinates

example

camera.position.set(0,0,100)//set(x,y,z)
camera.lookAt(new THREE.Vector3(0, 0, 0));

var cube = new THREE.Mesh(geometry, material);
cube.position.set(0, 0, -100);

The camera is located at Z In the positive direction of the axis , The camera defaults to the origin , Look at Z Negative axis .
therefore ,cube The coordinates are z Negative axis , Can be seen by camera ,
If you set cube.position.set(0, 0, 200);
You can't see objects .

It can be done by camera.position.z And cube.position.z Change the size of the object you see

Reference Content ：
Camera understanding
https://blog.csdn.net/qq_42206266/article/details/80566992

Axis
https://blog.csdn.net/weixin_33910385/article/details/88853253
https://blog.csdn.net/cvchihzhza/article/details/80141344
https://blog.csdn.net/qq_42206266/article/details/80566992
The camera
https://blog.csdn.net/a13602955218/article/details/85222815
three.js The camera camera Attribute resolution
https://www.jianshu.com/p/cacd4a035b85
visual angle
https://www.iteye.com/blog/fqg05-1947139
Point line surface
https://yq.aliyun.com/articles/687186
Perspective camera
https://www.cnblogs.com/xulei1992/p/5709677.html
Position of camera and object
https://blog.csdn.net/tjj3027/article/details/81976661

https://www.jianshu.com/p/f6e881df611e