Three.js中文网 Three.js中文网
首页
Three.js电子书
WebGL电子书 (opens new window)
免费视频 (opens new window)
3D案例 (opens new window)
系统课程 (opens new window)
案例课程 (opens new window)
threejs中文文档 (opens new window)
首页
Three.js电子书
WebGL电子书 (opens new window)
免费视频 (opens new window)
3D案例 (opens new window)
系统课程 (opens new window)
案例课程 (opens new window)
threejs中文文档 (opens new window)
Web3D系统课程视频
  • 0.学前说明

  • 1.Three.js快速入门

    • 1. threejs文件包下载和目录简介
    • 2. 学习环境-编辑器和静态服务器
    • 3. 开发和学习环境,引入threejs
    • 4. 第一个3D案例—创建3D场景
    • 5. 第一个3D案例—透视投影相机
      • 6. 第一个3D案例—渲染器
      • 7. 三维坐标系-加强三维空间认识
      • 8. 光源对物体表面影响
      • 9. 相机控件OrbitControls
      • 10. 平行光与环境光
      • 11. 动画渲染循环
      • 12. Canvas画布布局和全屏
      • 13. stats查看threejs渲染帧率
      • 14. 阵列立方体和相机适配体验
      • 15. Threejs常见几何体简介
      • 16. 高光网格材质Phong
      • 17. WebGL渲染器设置(锯齿模糊)
      • 18. gui.js库(可视化改变三维场景)
      • 19. gui调试界面2-颜色命名等
      • 20. gui调试3-下拉菜单、单选框
      • 21. gui.js库(分组)
      • 22. examples和文档(辅助开发)
      • 23. threejs语法总结
    • 2.几何体BufferGeometry

    • 3.模型对象、材质

    • 4.层级模型

    • 5.顶点UV坐标、纹理贴图

    • 6.加载外部三维模型(gltf)

    • 7.PBR材质与纹理贴图

    • 8.持续更新中

    • Three.js教程
    • 1.Three.js快速入门
    郭隆邦
    2023-01-20
    目录

    5. 第一个3D案例—透视投影相机

    # 第一个3D案例—透视投影相机

    Threejs如果想把三维场景Scene渲染到web网页上,还需要定义一个虚拟相机Camera,就像你生活中想获得一张照片,需要一台用来拍照的相机。

    # 透视投影相机PerspectiveCamera

    Threejs提供了正投影相机OrthographicCamera (opens new window)和透视投影相机PerspectiveCamera (opens new window)。本节课先给大家比较常用的透视投影相机PerspectiveCamera。

    透视投影相机PerspectiveCamera本质上就是在模拟人眼观察这个世界的规律。

    // 实例化一个透视投影相机对象
    const camera = new THREE.PerspectiveCamera();
    

    # 相机位置.posiiotn

    生活中用相机拍照,你相机位置不同,拍照结果也不同,threejs中虚拟相机同样如此。

    比如有一间房子,你拿着相机站在房间里面,看到的是房间内部,站在房子外面看到的是房子外面效果。

    相机对象Camera具有位置属性.posiiotn,通过位置属性.posiiotn可以设置相机的位置。

    //相机在Three.js三维坐标系中的位置
    // 根据需要设置相机位置具体值
    camera.position.set(200, 200, 200); 
    

    # 相机观察目标.lookAt()

    你用相机拍照你需要控制相机的拍照目标,具体说相机镜头对准哪个物体或说哪个坐标。对于threejs相机而言,就是设置.lookAt()方法的参数,指定一个3D坐标。

    //相机观察目标指向Threejs 3D空间中某个位置
    camera.lookAt(0, 0, 0); //坐标原点
    
    camera.lookAt(0, 10, 0);  //y轴上位置10
    
    camera.lookAt(mesh.position);//指向mesh对应的位置
    

    # 判断相机相对三维场景中长方体位置

    你可以把三维场景中长方体mesh想象为一个房间,然后根据相机位置和长方体位置尺寸对比,判断两者相对位置。你可以发现设置相机坐标(200, 200, 200),位于长方体外面一处位置。

    // 长方体尺寸100, 100, 100
    const geometry = new THREE.BoxGeometry( 100, 100, 100 );
    const mesh = new THREE.Mesh(geometry,material);
    // 相机位置xyz坐标:0,10,0
    mesh.position.set(0,10,0);
    // 相机位置xyz坐标:200, 200, 200
    camera.position.set(200, 200, 200); 
    

    # 定义相机渲染输出的画布尺寸

    你生活中相机拍照的照片是有大小的,对于threejs而言一样,需要定义相机在网页上输出的Canvas画布(照片)尺寸,大小可以根据需要定义,这里先随机定义一个尺寸。

    Canvas画布:课程中会把threejs虚拟相机渲染三维场景在浏览器网页上呈现的结果称为Canvas画布。

    // 定义相机输出画布的尺寸(单位:像素px)
    const width = 800; //宽度
    const height = 500; //高度
    

    # 透视投影相机PerspectiveCamera:视锥体

    透视投影相机的四个参数fov, aspect, near, far构成一个四棱台3D空间,被称为视锥体,只有视锥体之内的物体,才会渲染出来,视锥体范围之外的物体不会显示在Canvas画布上。

    视锥体

    // width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
    const width = 800; //宽度
    const height = 500; //高度
    // 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000:远裁截面
    const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
    

    PerspectiveCamera参数介绍:

    PerspectiveCamera( fov, aspect, near, far )
    
    参数 含义 默认值
    fov 相机视锥体竖直方向视野角度 50
    aspect 相机视锥体水平方向和竖直方向长度比,一般设置为Canvas画布宽高比width / height 1
    near 相机视锥体近裁截面相对相机距离 0.1
    far 相机视锥体远裁截面相对相机距离,far-near构成了视锥体高度方向 2000
    4. 第一个3D案例—创建3D场景
    6. 第一个3D案例—渲染器

    ← 4. 第一个3D案例—创建3D场景 6. 第一个3D案例—渲染器→

    Theme by Vdoing | Copyright © 2016-2023 郭隆邦 | 引用请注明网站链接
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式