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快速入门

  • 2.几何体BufferGeometry

  • 3.模型对象、材质

    • 1. 三维向量Vector3与模型位置
    • 2. 欧拉Euler与角度属性.rotation
      • 3. 模型材质颜色(Color对象)
      • 4. 模型材质父类Material
      • 5. 模型材质和几何体属性
      • 6. 克隆.clone()和复制.copy()
    • 4.层级模型

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

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

    • 7.PBR材质与纹理贴图

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

    • 9.生成曲线、几何体

    • 10.相机基础

    • 11.光源和阴影

    • 12.精灵模型Sprite

    • 13.后处理EffectComposer

    • 14.射线拾取模型

    • 15.场景标注标签信息

    • 16.关键帧动画

    • 17.动画库tween.js

    • Three.js教程
    • 3.模型对象、材质
    郭隆邦
    2023-01-25
    目录

    2. 欧拉Euler与角度属性.rotation

    # 角度属性.rotation

    模型的角度属性.rotation和四元数属性.quaternion都是表示模型的角度状态,只是表示方法不同,.rotation属性值是欧拉对象Euler (opens new window),.quaternion属性值是是四元数对象Quaternion (opens new window)

    大家刚入门,就先给大家介绍比较容易理解的角度属性.rotation和对应属性值欧拉对象Euler。

    # 欧拉对象Euler

    // 创建一个欧拉对象,表示绕着xyz轴分别旋转45度,0度,90度
    const Euler = new THREE.Euler( Math.PI/4,0, Math.PI/2);
    

    通过属性设置欧拉对象的三个分量值。

    const Euler = new THREE.Euler();
    Euler.x = Math.PI/4;
    Euler.y = Math.PI/2;
    Euler.z = Math.PI/4;
    

    # 改变角度属性.rotation

    角度属性.rotation的值是欧拉对象Euler,意味着你想改变属性.rotation,可以查询文档关于Euler类的介绍。

    //绕y轴的角度设置为60度
    mesh.rotation.y += Math.PI/3;
    //绕y轴的角度增加60度
    mesh.rotation.y += Math.PI/3;
    //绕y轴的角度减去60度
    mesh.rotation.y -= Math.PI/3;
    

    # 旋转方法.rotateX()、.rotateY()、.rotateZ()

    模型执行.rotateX()、.rotateY()等旋转方法,你会发现改变了模型的角度属性.rotation。

    mesh.rotateX(Math.PI/4);//绕x轴旋转π/4
    
    // 绕着Y轴旋转90度
    mesh.rotateY(Math.PI / 2);
    //控制台查看:旋转方法,改变了rotation属性
    console.log(mesh.rotation);
    

    # 旋转动画

    // 渲染循环
    function render() {
        model.rotation.y+=0.01;
        requestAnimationFrame(render);
    }
    
    function render() {
        model.rotateY(0.01);
    }
    

    # 绕某个轴旋转

    网格模型绕(0,1,0)向量表示的轴旋转π/8。

    const axis = new THREE.Vector3(0,1,0);//向量axis
    mesh.rotateOnAxis(axis,Math.PI/8);//绕axis轴旋转π/8
    
    1. 三维向量Vector3与模型位置
    3. 模型材质颜色(Color对象)

    ← 1. 三维向量Vector3与模型位置 3. 模型材质颜色(Color对象)→

    Theme by Vdoing | Copyright © 2016-2025 豫ICP备16004767号-2
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式