使用3D引擎threeJS实现星空粒子移动效果(2)

相机初始化说明:

  实例中使用的是透视投影. var camera = new THREE.PerspectiveCamera( fov , aspect , near , far );
  透视投影中,会把称为视体积领域中的物体作成投影图。 视体积是通过以下4个参数来指定。
  视野角:fov
  纵横比:aspect
  相机离视体积最近的距离:near
  相机离视体积最远的距离:far

  设置相机的位置:

  相机的位置坐标和视野的中心坐标,按

 //设置相机的位置坐标
    camera.position.x = 100;
    camera.position.y = 20;
    camera.position.z = 50;

  方式进行设置。 和该方式一样,下面这样的方法也可以
    camera.position.set(100,20,50);

此外还可以设置相机的上方向,视野中心等,
设置相机的上方向为正方向: 

camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 1;

设置相机的视野中心

  利用[lookAt]方法来设置相机的视野中心。 「lookAt()」的参数是一个属性包含中心坐标「x」「y」「z」的对象。
   「lookAt()」方法不仅是用来设置视点的中心坐标、 在此之前设置的相机属性要发生实际作用,也需要调用 [lookAt] 方法。

   

其他投影方式

在 Three.js 中、有各种各样的类,用来来实现透视投影、正投影或者复合投影(透视投影和正投影)这样的相机。
   

var camera = THREE.OrthographicCamera = function ( left, right, top, bottom, near, far ) //正投影
var camera = THREE.CombinedCamera = function ( width, height, fov, near, far, orthonear, orthofar ) //複合投影

渲染器

创建CanvasRenderer对象.这是一个普通的2D画布对象,实例中我们添加到body标签中. 否则我们就不会看到它。我们想让它充满整个浏览器窗口,所以我们设置其大小为window.innerwidth和window.innerheight。

鼠标监听

使用自定义函数makeParticles()创建粒子,并为其添加mousemove侦听器来跟踪鼠标的位置,最后我们建立一个间隔调用update函数一秒30次。
update函数中的定义如下:

function update() {
    updateParticles();
    renderer.render( scene, camera );
  }

产生粒子的函数

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/510.html