• Three.js使用rotation旋转模型


    Three.js使用rotation旋转模型

    物体的局部旋转,以弧度来表示

    • 角度 转 弧度 THREE.MathUtils.degToRad(deg)
    • 弧度 转 角度 THREE.MathUtils.radToDeg (rad)

    角度弧度互转

    • 弧度 = 角度 / 180 * Math.PI
    • 角度 = 弧度 * 180 / Math.PI
    • 角度 转 弧度 THREE.MathUtils.degToRad(deg)
    • 弧度 转 角度 THREE.MathUtils.radToDeg (rad)
    • π(弧度) = 180°(角度)

    改变rotation的X,Y,Z会发生什么?

    改变rotation的X,Y,Z会发生什么

    测试代码

    不旋转
    在这里插入图片描述
    绕X轴逆时针旋转90度

    mesh.rotation.set(-Math.PI / 2, 0, 0);
    
    • 1

    在这里插入图片描述

    绕Y轴旋转180度

    • 使用Math.PI
    mesh.rotation.set(-Math.PI / 2, 0, Math.PI);
    
    • 1
    • 使用MathUtils.degToRad
    mesh.rotation.set(-THREE.MathUtils.degToRad(90), 0 ,THREE.MathUtils.degToRad(180));
    
    • 1

    在这里插入图片描述
    完整代码

    
    
      
        
        第一个three.js文件_WebGL三维场景
        
        
        
        
        
        
        
        
      
    
      
        
      
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
  • 相关阅读:
    赢麻了!smardaten闷声干大事,竟然用无代码开发了复杂小程序!
    4.2 sql手工注入和自动注入实战(OWASP实战训练)
    CY3-peg-海藻酸钠|海藻酸钠-荧光染料CY3|alginate-Cyanine3
    react前端优化小结笔记
    从Spring为什么要用IoC的支点,我撬动了整个Spring的源码脉络!
    MybatisPlus-环境配置/基本CRUD/常用注解
    智能AI系统源码ChatGPT系统源码+详细搭建部署教程+AI绘画系统+已支持OpenAI GPT全模型+国内AI全模型
    【Codeforces Round #811 (Div. 3)】【题目解析+AK代码】
    狂神详讲Linux
    SpringBoot:(六)YAML配置文件
  • 原文地址:https://blog.csdn.net/wz122330/article/details/126668570