WebGL ThreeJS学习总结三

内容简介：WebGL ThreeJS学习总结三

总结三主要是学习ThreeJS框架和一些数学知识等，包括相机、光线、形状、变换、视角控制、焦点控制、矩阵和弧度等；并根据所学知识实现一个简易魔方。

• 四元数、欧拉角

ThreeJS提供了两种三维旋转表达方式：欧拉角(euler)和四元数(quaternion)，它们相比较使用矩阵的方式进行变换更加的节省存储空间和更方便的进行插值， 但是欧拉角(euler)存在万向锁问题。

讲真对于我这种数学渣来说着实有点复杂，下次再说…

• 矩阵 THREE.Matrix3、THREE.Matrix4

THREE.Matrix4表示4*4的矩阵；

THREE.Matrix3表示3*3的矩阵。

• 向量 THREE.Vector2、THREE.Vector3、THREE.Vector4

向量是数学、物理学和工程科学等多个自然科学中的基本概念，指一个同时具有大小和方向的几何对象。

ThreeJS中的相关类会复杂一些，比如THREE.Vector3可以表示3D空间中的点，也可以表示从(0,0,0)到(x,y,z)的向量，同时还可以表示任意顺序的一组数。

• 3D对象 THREE.Object3D

这是ThreeJS类库中大部分对象的基类，提供了一系列属性和操作方法在3D空间里边。

不推荐调用该对象的add方法，把某个另外对象作为子元素合并在该对象组中；官方建议的做法是利用Group对象合并。

Object3D对象的几何变化基本都是相对于物体本身的坐标系而言的，而且自身坐标系也跟着变化。

• 弧度

弧度是角的度量单位，缩写为rad，一周的弧度数位2π。

弧度是ThreeJS中的常用单位，比如Object3D对象的rotateY、rotateOnAxis等方法中参数单位就是弧度。

• 几何图形 THREE.Geometry

  var geometry = new THREE.Geometry();
  //vertices属性中包含该图形的所有顶点位置
  geometry.vertices.push(
      new THREE.Vector3( -10,  10, 0 ),
      new THREE.Vector3( -10, -10, 0 ),
      new THREE.Vector3(  10, -10, 0 )
  );

• 对象组 THREE.Group

• 基础网孔材料 THREE.MeshBasicMaterial

• 网孔 THREE.Mesh

绘制3D图形最常用的一种方法就是使用网格（Mesh）

• 线条 THREE.Line

• 线条集合 THREE.LineSegments

• 基础线条材料 THREE.LineBasicMaterial

• 球体 THREE.SphereGeometry

  /**
   * 构造函数：
   * radius表示球体半径；
   * widthSegments表示横向划分区域数量；
   * heightSegments表示纵向划分区域数量；
   * 其它不明
   */
  var geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength);

• 纹理加载器 THREE.TextureLoader

  var loader = new THREE.TextureLoader();
  loader.load( 'textures/land_ocean_ice_cloud_2048.jpg', function ( texture ) {
      var geometry = new THREE.SphereGeometry( 100, 20, 20 );
      var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
      /**
       * 由于纹理加载属于异步流程，在回调函数把模型加入场景中后需要再次渲染才能显示出来
       */
      var mesh = new THREE.Mesh( geometry, material );
      render();//再次渲染
  },function ( xhr ) {
      console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
  },function ( xhr ) {
      console.log( 'An error happened' );
  });

• 环境光 THREE.AmbientLight

颜色会添加到整个场景和所有对象的当前颜色上。

• 方向光、平行光 THREE.DirectionalLight

• 透视投影相机 THREE.PerspectiveCamera

  /**
   * 构造函数：
   * fov表示可视角度；
   * aspect表示裁剪面宽高比；
   * near表示近端距离；
   * far表示远端距离；
   * 只有离相机的距离大于near值小于far值，且在相机的可视角度之内，才能被相机投影到。
   */
  var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

• 正交投影相机 THREE.OrthographicCamera

  /**
   * 构造函数：
   * left左侧面
   * right右侧面
   * top上侧面
   * bottom下侧面
   * near近侧面
   * far远侧面
   * 这六个侧面所围成的内部区域就是相机投影的可视区域
   * @type {THREE}
   */
  var camera = new THREE.OrthographicCamera( left, right, top, bottom, near, far );

• 数学方法类 Three.Math

  /**
   * 如果value大于等于min且小于等于max则返回value
   * 如果value小于min则返回min
   * 如果value大于max则返回max
   */
  clamp ( value, min, max )

• 视角控制

ThreeJS提供包括orbitcontrols和trackballcontrols等多种视角控制类库支持，暂时只了解基本用法。

• 焦点控制 Three.Raycaster

Three.Raycaster被设计用来判断鼠标焦点是否在空间的某个物体上，暂时只了解基本用法，另外要注意获取焦点元素不能放在渲染方法里边执行否则移动端会有问题。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• HDFS 架构学习总结
• Golang变量学习总结
• 推荐系统-学习总结
• HTTPS学习总结
• Go的学习总结
• canvas学习总结

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。