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

    7. 三维坐标系-加强三维空间认识

    # threejs三维坐标系—加强三维空间认识

    本节课的目的就是为了加强大家对threejs三维空间的认识。

    # 辅助观察坐标系

    THREE.AxesHelper()的参数表示坐标系坐标轴线段尺寸大小,你可以根据需要改变尺寸。

    // AxesHelper:辅助观察的坐标系
    const axesHelper = new THREE.AxesHelper(150);
    scene.add(axesHelper);
    

    # 材质半透明设置

    设置材质半透明,这样可以看到坐标系的坐标原点。

    const material = new THREE.MeshBasicMaterial({
        color: 0x0000ff, //设置材质颜色
        transparent:true,//开启透明
        opacity:0.5,//设置透明度
    });
    

    # AxesHelper的xyz轴

    three.js坐标轴颜色红R、绿G、蓝B分别对应坐标系的x、y、z轴,对于three.js的3D坐标系默认y轴朝上。

    # 设置模型在坐标系中的位置或尺寸

    通过模型的位置、尺寸设置,加深3D坐标系的概念。

    测试:设置长方体xyz不同方向尺寸

    // 设置几何体长宽高,也就是x、y、z三个方向的尺寸
    //对比三个参数分别对应xyz轴哪个方向
    new THREE.BoxGeometry(100, 60, 20);
    

    测试:改变位置

    // 设置模型mesh的xyz坐标
    mesh.position.set(100,0,0);
    

    # 改变相机参数——预览新的渲染效果

    你可以尝试源码中改变相机的参数,看看场景中的物体渲染效果怎么变化。

    相机放在x轴负半轴,目标观察点是坐标原点,这样相当于相机的视线是沿着x轴正方向,只能看到长方体的一个矩形平面。

    camera.position.set(-1000, 0, 0);
    camera.lookAt(0, 0, 0);
    
    // 相机视线沿着x轴负半轴,mesh位于相机后面,自然看不到
    camera.position.set(-1000, 0, 0);
    camera.lookAt(-2000, 0, 0);
    

    相机far偏小,mesh位于far之外,物体不会显示在画布上。

    // const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
    // 你可以进行下面测试,改变相机参数,把mesh放在视锥体之外,看看是否显示
    // 3000改为300,使mesh位于far之外,mesh不在视锥体内,被剪裁掉
    const camera = new THREE.PerspectiveCamera(30, width / height, 1, 300);
    

    视锥体

    6. 第一个3D案例—渲染器
    8. 光源对物体表面影响

    ← 6. 第一个3D案例—渲染器 8. 光源对物体表面影响→

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