提示：本系列文章參考http://www.webgl3d.cn/Three.js/的three.js教程。

文章目錄

• 前言
• 一、精靈模型Sprite
• • 1.設(shè)置紋理貼圖
  • 2.精靈材質(zhì)對象SpriteMaterial
  • 3.創(chuàng)建精靈模型對象
  • 4.scale.set() 方法設(shè)置精靈大小
• 二、精靈模型模擬森林場景
• • 1.創(chuàng)建草坪
  • 2.利用for循環(huán)設(shè)置一定數(shù)量的雨滴精靈模型
• 三、精靈模型模擬下雨場景
• • 1.創(chuàng)建草坪
  • 2.創(chuàng)建group群組里放入一定數(shù)量的雨滴
  • 3.利用函數(shù)讓渲染器渲染遍歷雨滴群組，控制刷新頻率產(chǎn)生動(dòng)畫效果，然后執(zhí)行渲染操作。

---

前言

本篇主要介紹精靈模型Sprite，模擬了森林和下雨場景。

---

一、精靈模型Sprite

精靈模型Sprite的基類是Object3D，Object3D類里可以使用的屬性方法精靈模型都可以使用。以雨滴為例。
效果如下：

1.設(shè)置紋理貼圖

給精靈模型Sprite加載紋理貼圖的圖片（以雨滴為例）。

var texture = new THREE.TextureLoader().load("rain.png");

2.精靈材質(zhì)對象SpriteMaterial

精靈材質(zhì)對象 SpriteMaterial 的基類是材質(zhì)Material，Material 里的屬性方法 SpriteMaterial 里都可以使用。SpriteMaterial 不需要?jiǎng)?chuàng)建幾何體，直接使用就行。

// 創(chuàng)建精靈材質(zhì)對象SpriteMaterialvar spriteMaterial = new THREE.SpriteMaterial({color:0xffffff,//設(shè)置精靈矩形區(qū)域顏色rotation:Math.PI/4,//旋轉(zhuǎn)精靈對象45度，弧度值map: texture,//設(shè)置精靈紋理貼圖});

3.創(chuàng)建精靈模型對象

創(chuàng)建精靈模型對象加入到場景中，和以前的幾何體一樣。

// 創(chuàng)建精靈模型對象，不需要幾何體geometry參數(shù)var sprite = new THREE.Sprite(spriteMaterial);scene.add(sprite);

4.scale.set() 方法設(shè)置精靈大小

使用 精靈模型對象名.scale.set() 方法設(shè)置精靈大小。

// 控制精靈大小，比如可視化中精靈大小表征數(shù)據(jù)大小sprite.scale.set(20, 20, 1); 只需要設(shè)置x、y兩個(gè)分量就可以

二、精靈模型模擬森林場景

效果如下：

1.創(chuàng)建草坪

先創(chuàng)建一個(gè)草坪地面，在矩形平面上利用陣列將紋理貼圖草的圖片進(jìn)行重復(fù)。

/*** 創(chuàng)建一個(gè)地面*/var geometry = new THREE.PlaneGeometry(300, 300); //矩形平面// 加載樹紋理貼圖var texture = new THREE.TextureLoader().load("grass.jpg");// 設(shè)置陣列texture.wrapS = THREE.RepeatWrapping;texture.wrapT = THREE.RepeatWrapping;/*// 偏移效果texture.offset = new THREE.Vector2(0.5, 0.5)*/// uv兩個(gè)方向紋理重復(fù)數(shù)量texture.repeat.set(30, 30);var material = new THREE.MeshLambertMaterial({map: texture,});var mesh = new THREE.Mesh(geometry, material); //網(wǎng)格模型對象Meshscene.add(mesh); //網(wǎng)格模型添加到場景中mesh.rotateX(-Math.PI / 2);

2.利用for循環(huán)設(shè)置一定數(shù)量的雨滴精靈模型

將紋理貼圖利用for循環(huán)設(shè)置一定數(shù)量的雨滴精靈模型，設(shè)置大小后利用 random() 函數(shù)在xoz平面上隨機(jī)分布。

/*** 精靈創(chuàng)建樹林效果*/// 加載樹紋理貼圖var textureTree = new THREE.TextureLoader().load("tree.png");// 批量創(chuàng)建表示一個(gè)樹的精靈模型for (let i = 0; i < 100; i++) {var spriteMaterial = new THREE.SpriteMaterial({map:textureTree,//設(shè)置精靈紋理貼圖});// 創(chuàng)建精靈模型對象var sprite = new THREE.Sprite(spriteMaterial);scene.add(sprite);// 控制精靈大小,sprite.scale.set(30, 30, 1); 只需要設(shè)置x、y兩個(gè)分量就可以var k1 = Math.random() - 0.5;var k2 = Math.random() - 0.5;// 設(shè)置精靈模型位置，在xoz平面上隨機(jī)分布sprite.position.set(300 * k1, 30, 300 * k2)}

三、精靈模型模擬下雨場景

效果如下：

1.創(chuàng)建草坪

先創(chuàng)建一個(gè)草坪地面，在矩形平面上利用陣列將紋理貼圖草的圖片進(jìn)行重復(fù)。

/*** 創(chuàng)建一個(gè)地面*/var geometry = new THREE.PlaneGeometry(300, 300); //矩形平面// 加載樹紋理貼圖var texture = new THREE.TextureLoader().load("grass.jpg");// 設(shè)置陣列texture.wrapS = THREE.RepeatWrapping;texture.wrapT = THREE.RepeatWrapping;/*// 偏移效果texture.offset = new THREE.Vector2(0.5, 0.5)*/// uv兩個(gè)方向紋理重復(fù)數(shù)量texture.repeat.set(30, 30);var material = new THREE.MeshLambertMaterial({map: texture,});var mesh = new THREE.Mesh(geometry, material); //網(wǎng)格模型對象Meshscene.add(mesh); //網(wǎng)格模型添加到場景中mesh.rotateX(-Math.PI / 2);

2.創(chuàng)建group群組里放入一定數(shù)量的雨滴

// 創(chuàng)建一個(gè)組表示所有的雨滴var group = new THREE.Group();// 加載雨滴理貼圖var texture = new THREE.TextureLoader().load("rain2.png");// 創(chuàng)建精靈材質(zhì)對象SpriteMaterialfor(let i=0;i<3000;i++){var spriteMaterial = new THREE.SpriteMaterial({color:0xffffff,//設(shè)置精靈矩形區(qū)域顏色/*rotation:Math.PI/4,//旋轉(zhuǎn)精靈對象45度，弧度值*/map: texture,//設(shè)置精靈紋理貼圖});// 創(chuàng)建精靈模型對象，不需要幾何體geometry參數(shù)var sprite = new THREE.Sprite(spriteMaterial);scene.add(sprite);group.add(sprite);// 控制精靈大小，比如可視化中精靈大小表征數(shù)據(jù)大小sprite.scale.set(6, 6, 1); 只需要設(shè)置x、y兩個(gè)分量就可以var k1 = Math.random() - 0.5;var k2 = Math.random() - 0.5;var k3 = Math.random() - 0.5;// 設(shè)置精靈模型位置，在整個(gè)空間上上隨機(jī)分布sprite.position.set(300 * k1, 300*k3, 300 * k2);}scene.add(group);

3.利用函數(shù)讓渲染器渲染遍歷雨滴群組，控制刷新頻率產(chǎn)生動(dòng)畫效果，然后執(zhí)行渲染操作。

在設(shè)置渲染對象和執(zhí)行渲染操作間加入函數(shù)，每次渲染遍歷雨滴群組。

function render() {// 每次渲染遍歷雨滴群組，刷新頻率30~60FPS，兩幀時(shí)間間隔16.67ms~33.33ms// 每次渲染都會(huì)更新雨滴的位置，進(jìn)而產(chǎn)生動(dòng)畫效果group.children.forEach(sprite => {// 雨滴的y坐標(biāo)每次減1sprite.position.y -= 1;if (sprite.position.y < 0) {// 如果雨滴落到地面，重置y，從新下落sprite.position.y = 200;}});

---

總結(jié)

以上是生活随笔為你收集整理的Three.js学习07的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。