Three.js入门学习笔记00：坐标系，照相机（暂时理解）

学习正交照相机遇到一些问题没理解透彻，在这里整理一下暂时的理解，以后再修正，小白一个，有错误欢迎指正。

一.坐标系

世界坐标系为右手坐标系，X正向向右，Y轴正向向上，Z轴正向由屏幕内伸向屏幕外。

围绕轴旋转

拇指指向旋转轴的正方向，四指弯曲的方向为旋转的正方向

cube.rotaion.y -= 0.01; //弧度

本地坐标

物体的坐标，在物体中心点。

可添加辅助坐标轴

var axisHelper = new THREE.AxisHelper(4)；
axisHelper.rotation.y -=0.01;//坐标轴旋转
scene.add(axisHelper)

蓝：z轴
红：x轴
绿：y轴

二.相机所在位置

相机默认在坐标系原点，看向Z轴负半轴
camera.postion：相机所在的位置，默认为（0，0，0）
camera.lookAt：相机焦点方向，默认为Z轴负半轴方向

将相机聚焦在某个点上

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

相机追踪某个物体

camera.lookAt(mesh.position)

正交
六个参数分别代表正交投影照相机拍摄到的六个面的位置。
其中，near表示*面与相机中心点的垂直距离；far表示远平面与相机中心点的垂直距离。

透视

三.位置关系

<script type="text/javascript">
    //renderer
        var renderer = new THREE.WebGLRenderer();
            renderer.setSize(400, 300);
            canvas，不用再定义canvas元素
            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>

以上代码我理解的位置关系，不知对不对
蓝色数字为长度，黑色数字为坐标

实例

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);

相机位于Z轴正方向上，相机默认在原点，看向Z轴负向。
因此，cube坐标在z轴负向，可以被相机看见，
如果设置cube.position.set(0, 0, 200);
则看不到物体。

可通过camera.position.z与cube.position.z改变看到的物体大小

参考内容：
坐标轴
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
相机
https://blog.csdn.net/a13602955218/article/details/85222815
hree.js 相机camera属性解析
https://www.jianshu.com/p/cacd4a035b85
视角
https://www.iteye.com/blog/fqg05-1947139
点线面
https://yq.aliyun.com/articles/687186
透视照相机
https://www.cnblogs.com/xulei1992/p/5709677.html
相机与物体的位置
https://blog.csdn.net/tjj3027/article/details/81976661

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