Three.js中文网 Three.js中文网
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • Three.js基础课程(旧版本) (opens new window)
  • 文章
WebGPU教程
  • WebGL教程
  • WebGL教程(旧版本) (opens new window)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原英文官网文档 (opens new window)
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • Three.js基础课程(旧版本) (opens new window)
  • 文章
WebGPU教程
  • WebGL教程
  • WebGL教程(旧版本) (opens new window)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原英文官网文档 (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语法总结
      • 【选修】Vue+Threejs开发环境
      • 【选修】React+Three.js开发环境
    • 2.几何体BufferGeometry

    • 3.模型对象、材质

    • 4.层级模型

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

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

    • 7.PBR材质与纹理贴图

    • 8.渲染器和前端UI界面

    • 9.生成曲线、几何体

    • 10.相机基础

    • 11.光源和阴影

    • 12.精灵模型Sprite

    • 13.后处理EffectComposer

    • 14.射线拾取模型

    • 15.场景标注标签信息

    • 16.关键帧动画

    • 17.动画库tween.js

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

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

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

    视频讲解 (opens new window)

    本节课的目的就是为了加强大家对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-2025 豫ICP备16004767号-2
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式