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

最新推荐文章于 2024-08-15 17:41:57 发布

月亮实验室

最新推荐文章于 2024-08-15 17:41:57 发布

阅读量1k

点赞数

分类专栏： Three.js 文章标签： webgl canvas 3d javascript 前端

本文链接：https://blog.csdn.net/jbwhysy/article/details/104632178

版权

Three.js 专栏收录该内容

21 篇文章 8 订阅

订阅专栏

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

一.坐标系

世界坐标系为右手坐标系，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);