場景（Scene）

THREE.Scene對(duì)象是所有不同對(duì)象的容器，但這個(gè)對(duì)象本身沒有很復(fù)雜的操作，我們通常在程序最開始的時(shí)候?qū)嵗粋€(gè)場景，然后將照相機(jī)、物體、光源添加到場景中。

const scene = new THREE.Scene()  scene.add(camera)        //添加照相機(jī)  scene.add(plane)         //添加灰色平面  scene.add(sphere)        //添加黃色球體  scene.add(spotLight)     //添加光源

照相機(jī)（Camera）

Three.js庫提供了兩種不同的照相機(jī)：透視投影照相機(jī)和正交投影照相機(jī)。

透視投影照相機(jī)的效果類似人眼在真實(shí)世界中看到的場景，有 "近大遠(yuǎn)小" 的效果，垂直視平面的平行線在遠(yuǎn)方會(huì)相交。  正交投影照相機(jī)的效果類似我們在數(shù)學(xué)幾何學(xué)課上老師教我們畫的效果，在三維空間內(nèi)平行的線，在屏幕上永遠(yuǎn)不會(huì)相交。

我們這里用的是透視投影照相機(jī)，就主要討論它，正交投影照相機(jī)后面用到再說。

const camera = new THREE.PerspectiveCamera(    45,     window.innerWidth / window.innerHeight,    0.1,    1000  )  camera.position.set(-30, 40, 30)  camera.lookAt(0,0,0)  scene.add(camera)

設(shè)置一個(gè)照相機(jī)分三步：確定視野范圍， 確定照相機(jī)坐標(biāo)， 確定照相機(jī)聚焦點(diǎn)。

我們在new THREE.PerspectiveCamera的時(shí)候確定照相機(jī)的視野范圍，對(duì)應(yīng)上圖，45是fov，就是視野上下邊緣之間的夾角。window.innerWidth / window.innerHeight是視野水平方向和豎直方向長度的比值，0.1（near）和1000（far）分別是照相機(jī)到視景體最近、最遠(yuǎn)的距離，這些參數(shù)決定了要顯示的三維空間的范圍，也就是上圖中的灰色區(qū)域。

camera.position.set(-30, 40, 30)確定了照相機(jī)在空間中的坐標(biāo)。

camera.lookAt(0,0,0)確定了照相機(jī)聚焦點(diǎn)，該點(diǎn)和照相機(jī)坐標(biāo)的連線就是拍攝方向。

上圖中的灰色區(qū)域在屏幕上的顯示效果，也就是將三維空間的坐標(biāo)投影到屏幕二維坐標(biāo)是webgl完成的，我們只需要關(guān)心三維空間的坐標(biāo)。

坐標(biāo)系

與我們之前講到的CSS的3D坐標(biāo)系[2]不同，webgl坐標(biāo)系是右手坐標(biāo)系，X軸向右，Y軸向上，Z軸是指向“自己”的。

伸出右手，讓拇指和食指成"L"形，大拇指向右，食指向上。其余的手指指向自己，這樣就建立了一個(gè)右手坐標(biāo)系。

其中，拇指、食指和其余手指分別代表x，y，z軸的正方向

在空間中定位、平移都比較好理解，這里看一下旋轉(zhuǎn)。

有時(shí)，我們會(huì)這樣設(shè)置物體的旋轉(zhuǎn)：object.rotation.x = \-Math.PI / 2，表示的是繞X軸旋轉(zhuǎn)-90度。具體是怎么旋轉(zhuǎn)，就要對(duì)照上面坐標(biāo)系，展開右手，拇指指向x軸正方向，其余手指的彎曲方向就是旋轉(zhuǎn)的正方向；拇指指向x軸負(fù)方向，其余手指的彎曲方向就是旋轉(zhuǎn)的負(fù)方向。y軸和z軸旋轉(zhuǎn)方向的判斷同理。

物體

在three.js中，創(chuàng)建一個(gè)物體需要兩個(gè)參數(shù)：幾何形狀（Geometry）和 材質(zhì)（Material）。通俗的講，幾何形狀決定物體的形狀，材質(zhì)決定物體表面的顏色、紋理貼圖、對(duì)光照的反應(yīng)等等。

//創(chuàng)建一個(gè)平面幾何體，參數(shù)是沿X方向的Width和沿Y方向的height  const planeGeometry = new THREE.PlaneGeometry(60,20)    //創(chuàng)建一種材質(zhì)，MeshLambertMaterial是一種考慮漫反射而不考慮鏡面反射的材質(zhì)  const planeMaterial = new THREE.MeshLambertMaterial({    color: 0xAAAAAA  })    //根據(jù)幾何形狀和材質(zhì)創(chuàng)建物體  const plane = new THREE.Mesh(planeGeometry, planeMaterial)  //設(shè)置物體的位置和旋轉(zhuǎn)，并將物體加到場景（scene）中 plane.rotation.x = -Math.PI / 2  plane.position.set(15, 0, 0)  scene.add(plane)

一些常用的幾何形狀和材質(zhì)可以參考Three.js入門指南[3]

光照

沒有光源，渲染的場景將不可見（除非你使用基礎(chǔ)材質(zhì)或線框材質(zhì)，當(dāng)然，在構(gòu)建3D應(yīng)用時(shí)，幾乎不怎么用基礎(chǔ)材質(zhì)和線框材質(zhì)）。

WebGL本身并不支持光源。如果不使用Three.js，則需要自己寫WebGL著色程序來模擬光源。Three.js讓光源的使用變得簡單。

const spotLight = new THREE.SpotLight(0xffffff)  spotLight.position.set(0, 0, 100)  scene.add(spotLight)

如上所示，我們只需要?jiǎng)?chuàng)建一個(gè)光源，并將它加入到場景中就可以了。three.js會(huì)根據(jù)光源的類型、位置等信息計(jì)算出場景中各個(gè)物體的展示效果。

最常用的幾種光源是AmbientLight、PointLight、SpotLight、DirectionalLight。

渲染器（Renderer）

當(dāng)場景中的照相機(jī)、物體、光照等準(zhǔn)備就緒，就該渲染器上場了。

在上面那個(gè)小例子中，我們是這樣使用渲染器的：

//new 一個(gè)渲染器  const renderer = new THREE.WebGLRenderer()  //設(shè)置畫布背景色，也就是畫布中沒有物體的地方的顯示顏色  renderer.setClearColor(new THREE.Color(0x000000))  //設(shè)置畫布大小  renderer.setSize(window.innerWidth, window.innerHeight)  //將畫布元素（即renderer.domElement，它是一個(gè)canvas元素）掛載到一個(gè)dom節(jié)點(diǎn)  document.getElementById('webgl-output').appendChild(renderer.domElement)  //執(zhí)行渲染操作，參數(shù)是上面定義的場景（scene）和照相機(jī)（camera）  renderer.render(scene, camera)

可以看出，使用Three.js開發(fā)3D應(yīng)用，我們只需要關(guān)心場景中物體、照相機(jī)、光照等在三維空間中的布局，以及運(yùn)動(dòng)，具體怎么渲染都由Three.js去完成。當(dāng)然，懂一些webgl的基本原理會(huì)更好，畢竟有一些應(yīng)用會(huì)復(fù)雜到three.js的API滿足不了要求。

實(shí)現(xiàn)下雨動(dòng)畫

初始化場景

因?yàn)槊總€(gè)3D應(yīng)用的初始化都有scene、camera、render，所以我們把這三者的初始化封裝成一個(gè)類Template，后面的應(yīng)用初始化可以通過子類繼承這個(gè)類，以便快速搭建框架。

import {    Scene,    PerspectiveCamera,    WebGLRenderer,    Vector3,    Color  } from 'three'  export default class Template {   constructor () {               //各種默認(rèn)選項(xiàng)      this.el = document.body      this.PCamera = {        fov: 45,       aspect: window.innerWidth / window.innerHeight,        near: 1,        far: 1000      }      this.cameraPostion = new Vector3(0, 0, 1)      this.cameraLookAt = new Vector3(0,0,0)      this.rendererColor = new Color(0x000000)      this.rendererWidth = window.innerWidth      this.rendererHeight = window.innerHeight    }    initPerspectiveCamera () {     //初始化相機(jī)，這里是透視相機(jī)      const camera = new PerspectiveCamera(        this.PCamera.fov,        this.PCamera.aspect,        this.PCamera.near,        this.PCamera.far,      )     camera.position.copy(this.cameraPostion)      camera.lookAt(this.cameraLookAt)      this.camera = camera      this.scene.add(camera)    }    initScene () {                //初始化場景      this.scene = new Scene()     }    initRenderer () {             //初始化渲染器      const renderer = new WebGLRenderer()      renderer.setClearColor(this.rendererColor)      renderer.setSize(this.rendererWidth, this.rendererHeight)     this.el.appendChild(renderer.domElement)      this.renderer = renderer    }    init () {      this.initScene()      this.initPerspectiveCamera()      this.initRenderer()    }  }

在我們的下雨動(dòng)畫中，創(chuàng)建一個(gè)Director類管理動(dòng)畫，它繼承自Template類?？梢钥闯?，它要做的事很清晰：初始化框架、修改父類的默認(rèn)配置、添加物體（云層和雨滴）、添加光照（閃電也是光照形成的）、添加霧化效果、循環(huán)渲染。

//director.js  export default class Director extends Template{    constructor () {      super()      //set params      //camera      this.PCamera.fov = 60       //修改照相機(jī)的默認(rèn)視場fov      //init camera/scene/render      this.init()      this.camera.rotation.x = 1.16   //設(shè)置照相機(jī)的旋轉(zhuǎn)角度（望向天空）      this.camera.rotation.y = -0.12      this.camera.rotation.z = 0.27      //add object      this.addCloud()                  //添加云層和雨滴      this.addRainDrop()      //add light      this.initLight()                //添加光照，用PointLight模擬閃電      this.addLightning()      //add fog      this.addFog()                   //添加霧，在相機(jī)附近視野清晰，距離相機(jī)越遠(yuǎn)，霧的濃度越高      //animate      this.animate()                 //requestAnimationFrame實(shí)現(xiàn)動(dòng)畫    } }

創(chuàng)建不斷變換的云層

我們首先創(chuàng)建一個(gè)平面，將一小朵云做為材質(zhì)，得到一個(gè)云朵物體。然后將很多云朵物體進(jìn)行疊加，得到一團(tuán)云。

image.png

//Cloud.js  const texture = new TextureLoader().load('/images/smoke.png')  //加載云朵素材  const cloudGeo = new PlaneBufferGeometry(564, 300)   //創(chuàng)建平面幾何體  const cloudMaterial = new MeshLambertMaterial({   //圖像作為紋理貼圖，生成材質(zhì)    map: texture,    transparent: true  })  export default class Cloud {    constructor () {            const cloud = new Mesh(cloudGeo, cloudMaterial)   //生成云朵物體      cloud.material.opacity = 0.6      this.instance = cloud    }   setPosition (x,y,z) {      this.instance.position.set(x,y,z)   }    setRotation (x,y,z) {      this.instance.rotation.x = x      this.instance.rotation.y = y      this.instance.rotation.z = z    }    animate () {      this.instance.rotation.z -= 0.003            //云朵的運(yùn)動(dòng)是不斷繞著z軸旋轉(zhuǎn)    }  }

在Director類中，生成30個(gè)云朵物體，隨機(jī)設(shè)置它們的位置和旋轉(zhuǎn)，形成鋪開和層疊的效果。在循環(huán)渲染時(shí)調(diào)用云朵物體的animate方法。

//director.js  addCloud () {    this.clouds = []    for(let i = 0; i < 30; i++){      const cloud = new Cloud()      this.clouds.push(cloud)      cloud.setPosition(Math.random() * 1000 - 460, 600, Math.random() * 500 - 400)      cloud.setRotation(1.16, -0.12, Math.random() * 360)      this.scene.add(cloud.instance)    }  }  animate () {      //cloud move      this.clouds.forEach((cloud) => {  //調(diào)用每個(gè)云朵物體的animate方法，形成整個(gè)云層的不斷變換效果        cloud.animate()      })      ...      this.renderer.render(this.scene, this.camera)      requestAnimationFrame(this.animate.bind(this))    }

環(huán)境光和閃電

同時(shí)使用了AmbientLight和DirectionalLight作為整個(gè)場景的穩(wěn)定光源，增強(qiáng)對(duì)現(xiàn)實(shí)場景的模擬。

//director.js  initLight () {    const ambientLight = new AmbientLight(0x555555)    this.scene.add(ambientLight)    const directionLight = new DirectionalLight(0xffeedd)    directionLight.position.set(0,0,1)    this.scene.add(directionLight)  }

用PointLight模擬閃電，首先是初始一個(gè)PointLight。

//director.js  addLightning () {    const lightning = new PointLight(0x062d89, 30, 500, 1.7)    lightning.position.set(200, 300, 100)    this.lightning = lightning    this.scene.add(lightning)  }

在循環(huán)渲染時(shí)，不斷隨機(jī)改變點(diǎn)光源PointLight的強(qiáng)度（power），形成閃爍的效果，當(dāng)強(qiáng)度較小，即光線暗下來時(shí)，"悄悄"改變點(diǎn)光源的位置，這樣就能不突兀使閃電隨機(jī)地出現(xiàn)在云層地各個(gè)位置。

//director.js  animate () {    ...    //lightning    if(Math.random() > 0.93 || this.lightning.power > 100){      if(this.lightning.power < 100){        this.lightning.position.set(          Math.random() * 400,          300 + Math.random() * 200,          100        )      }      this.lightning.power = 50 + Math.random() * 500    }    this.renderer.render(this.scene, this.camera)    requestAnimationFrame(this.animate.bind(this))  }

創(chuàng)建雨滴

創(chuàng)建雨滴用到的粒子效果。創(chuàng)建一組粒子，直觀的方法是，創(chuàng)建一個(gè)粒子物體，然后復(fù)制N個(gè)，分別定義它們的位置和旋轉(zhuǎn)。

當(dāng)你使用少量的對(duì)象時(shí)，這很有效，但是當(dāng)你想使用大量的THREE.Sprite對(duì)象時(shí)，你會(huì)很快遇到性能問題，因?yàn)槊總€(gè)對(duì)象需要分別由Three.js進(jìn)行管理。

Three.js提供了另一種方式來處理大量的粒子，這需要使用THREE.Points。通過THREE.Points，Three.js不再需要管理大量單個(gè)的THREE.Sprite對(duì)象，而只需管理THREE.Points實(shí)例。

使用THREE.Points，可以非常容易地創(chuàng)建很多細(xì)小的物體，用來模擬雨滴、雪花、煙和其他有趣的效果。

THREE.Points的核心思想，就是先聲明一個(gè)幾何體geom，然后確定幾何體各個(gè)頂點(diǎn)的位置，這些頂點(diǎn)的位置將會(huì)是各個(gè)粒子的位置。通過PointsMaterial確定頂點(diǎn)的材質(zhì)material，然后new Points(geom, material)，根據(jù)傳入的幾何體和頂點(diǎn)材質(zhì)生成一個(gè)粒子系統(tǒng)。

粒子的移動(dòng)：粒子的位置坐標(biāo)是由一組數(shù)字確定const positions = this.geom.attributes.position.array，這組數(shù)字，每三個(gè)數(shù)確定一個(gè)坐標(biāo)點(diǎn)（x\y\z），所以要改變粒子的X坐標(biāo)，就改變positions[ 3n ] (n是粒子序數(shù))；同理，Y坐標(biāo)對(duì)應(yīng)的是positions[ 3n+1 ]，Z坐標(biāo)對(duì)應(yīng)的是positions[ 3n+2 ]。

//RainDrop.js  export default class RainDrop {    constructor () {      const texture = new TextureLoader().load('/images/rain-drop.png')     const material = new PointsMaterial({    //用圖片初始化頂點(diǎn)材質(zhì)        size: 0.8,        map: texture,        transparent: true      })       const positions = []      this.drops = 8000      this.geom = new BufferGeometry()      this.velocityY = []      for(let i = 0; i < this.drops; i++){        positions.push( Math.random() * 400 - 200 )        positions.push( Math.random() * 500 - 250 )        positions.push( Math.random() * 400 - 200 )        this.velocityY.push(0.5 + Math.random() / 2)  //初始化每個(gè)粒子的坐標(biāo)和粒子在Y方向的速度     }       //確定各個(gè)頂點(diǎn)的位置坐標(biāo)      this.geom.setAttribute( 'position', new Float32BufferAttribute( positions, 3 ) )        this.instance = new Points(this.geom, material)  //初始化粒子系統(tǒng)    }    animate () {      const positions = this.geom.attributes.position.array;       for(let i=0; i
將雨滴粒子添加到場景中，并在循環(huán)渲染時(shí)，調(diào)用RainDrop的animate方法：
//director.js  addRainDrop () {    this.rainDrop = new RainDrop()    this.scene.add(this.rainDrop.instance)  }  animate () {    //rain drop move    this.rainDrop.animate()    ...    this.renderer.render(this.scene, this.camera)    requestAnimationFrame(this.animate.bind(this))  }
感謝各位的閱讀，以上就是“如何用Three.js寫一個(gè)下雨動(dòng)畫”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)如何用Three.js寫一個(gè)下雨動(dòng)畫這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
            
            
                        

            分享題目：如何用Three.js寫一個(gè)下雨動(dòng)畫            

            轉(zhuǎn)載來源：http://weahome.cn/article/iheigp.html