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
    目录

    14. 阵列立方体和相机适配体验

    # 阵列立方体和相机适配体验

    本节课通过阵列一片立方体,进一步体验下透视投影相机的投影规律。

    # for循环创建一列模型

    const geometry = new THREE.BoxGeometry(100, 100, 100);
    //材质对象Material
    const material = new THREE.MeshLambertMaterial({
        color: 0x00ffff, //设置材质颜色
        transparent: true,//开启透明
        opacity: 0.5,//设置透明度
    });
    for (let i = 0; i < 10; i++) {
        const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        // 沿着x轴分布
        mesh.position.set(i*200,0,0);
        scene.add(mesh); //网格模型添加到场景中
    }
    

    # 双层for循环创建阵列模型

    //创建一个长方体几何对象Geometry
    const geometry = new THREE.BoxGeometry(100, 100, 100);
    //材质对象Material
    const material = new THREE.MeshLambertMaterial({
        color: 0x00ffff, //设置材质颜色
        transparent: true,//开启透明
        opacity: 0.5,//设置透明度
    });
    for (let i = 0; i < 10; i++) {
        for (let j = 0; j < 10; j++) {
            const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
            // 在XOZ平面上分布
            mesh.position.set(i * 200, 0, j * 200);
            scene.add(mesh); //网格模型添加到场景中  
        }
    }
    

    # 相机位置拉远,可以看到更大的观察范围

    const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
    // camera.position.set(292, 223, 185);
    //在原来相机位置基础上拉远,可以观察到更大的范围
     camera.position.set(800, 800, 800);
     camera.lookAt(0, 0, 0);
    

    # 超出视锥体远裁界面的范围的会被剪裁掉

    // const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
    const camera = new THREE.PerspectiveCamera(30, width / height, 1, 8000);
    // camera.position.set(292, 223, 185);
    // 超出视锥体远裁界面的范围的会被剪裁掉,不渲染  可以调整far参数适配
    camera.position.set(2000, 2000, 2000);
    camera.lookAt(0, 0, 0);
    

    # 改变相机观察目标

    // const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
    const camera = new THREE.PerspectiveCamera(30, width / height, 1, 8000);
    camera.position.set(2000, 2000, 2000);
    // camera.lookAt(0, 0, 0);
    // 改变相机观察目标点
    camera.lookAt(1000, 0, 1000);
    

    注意相机控件OrbitControls会影响lookAt设置,注意手动设置OrbitControls的目标参数

    // 设置相机控件轨道控制器OrbitControls
    const controls = new OrbitControls(camera, renderer.domElement);
    // 相机控件.target属性在OrbitControls.js内部表示相机目标观察点,默认0,0,0
    // console.log('controls.target', controls.target);
    controls.target.set(1000, 0, 1000);
    controls.update();//update()函数内会执行camera.lookAt(controls.targe)
    

    # 远小近大投影规律

    透视投影相机的投影规律是远小近大,通过相机观察阵列立方体大小变化,可以看到距离相机越远,立方体的渲染视觉效果越小。

    # fov改变

    增加相机视角fov,视锥体范围更大,意味着可以看到渲染范围更大,远小近大的视觉效果更明显。

    13. stats查看threejs渲染帧率
    15. Threejs常见几何体简介

    ← 13. stats查看threejs渲染帧率 15. Threejs常见几何体简介→

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