Three.js 关于照相机,视角的理解

Three.js 关于照相机,视角的理解

另附说明:本系列文章只是作者用于学习理解threejs以及WebGL的学习心得,学习途径也是从WebGL中文网上学习所得,如果上述网站认定侵权或不正当触犯其利益,请联系作者(PS:千万别告我),其它转载者造成的影响请自己负责,与本人无关

好了,该声明的也声明了,本人也是初入thre.js的丑新,写写也是为了记录理解,说的不对的地方,也欢迎批评指正

通过对WebGL中文网初级教程的前三章的学习。
知道3D应用中有4个最重要的组建 场景(scene)、相机(camera)和渲染器(renderer)还有几何体
场景渲染器几何体的理解不难,这里详细说一下相机
理解

这是照相机的构造函数

//fov 代表视角
//aspect 宽高比
//near 最近看到
//far 最远看到
var camera = PerspectiveCamera( fov, aspect, near, far )
//而这里其实确认的是照相机里近平面的距离
camera.position.z = 5;

同时需要当心的是这里使用的是右手坐标系(听视频老师讲的,本人也亲测了)

理解

另附学习代码

<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>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
three.js 中设置全景漫游的视角可以通过调整相机的位置和目标点来实现。下面是一些常用的方法: 1. 设置相机的位置: 你可以使用 `camera.position.set(x, y, z)` 方法来设置相机在场景中的位置。例如,如果你想将相机放置在全景图的中心位置,可以使用以下代码: ```javascript camera.position.set(0, 0, 0); // 将相机放置在全景图的中心位置 ``` 这将把相机的位置设置为原点(0, 0, 0),也就是全景图的中心。 2. 设置相机的目标点: 使用 `camera.lookAt(target)` 方法可以设置相机的目标点。这个方法将使相机朝向指定的目标点。例如,如果你想让相机朝向场景中的一个物体,可以使用以下代码: ```javascript var target = new THREE.Vector3(x, y, z); // 设置目标点的坐标 camera.lookAt(target); // 将相机朝向目标点 ``` 这将使相机朝向以 `(x, y, z)` 为坐标的目标点。 3. 控制相机视角: 如果你想让用户可以通过鼠标或触摸来控制相机视角,可以使用一些交互控制库,如 OrbitControls。首先,你需要引入 OrbitControls.js 文件,然后创建一个 OrbitControls 对象并将相机和渲染器传递给它: ```javascript var controls = new THREE.OrbitControls(camera, renderer.domElement); ``` 这样用户就可以通过鼠标拖动或触摸来改变相机的视角。 通过调整相机的位置和目标点,以及使用交互控制库,你可以实现在全景漫游中自定义相机的视角。希望对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值