當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

three.js 07-06 之 Sprite 一幅图片多个精灵

發(fā)布時間：2023/12/8 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 three.js 07-06 之 Sprite 一幅图片多个精灵小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

? ? 前面談到通過 THREE.Sprite 創(chuàng)建粒子時，可以通過加載外部圖片的方式來格式化粒子。那么，如果一幅圖片中包含多種精靈的話，那又該怎么辦呢？

? ? 接下來我們就來探討一下其實現(xiàn)方法，例如咋們有以下圖片：

一幅圖片中包含 5 種精靈

? ? 我首先大概來分析一下這張圖片，可以看出這張圖片一共有 5 種精靈，排列方式是一行平均分布，即每一種精靈在水平方向上（U 方向）都占整幅圖片的 1/5 即 0.2；而在垂直方向上（V 方向）都是占 100% 也就是 1/1=1。

? ? 好了，有了上面的分析之后，聰明的讀者肯定大概已經(jīng)知道從整幅圖中單獨加載每一種精靈的大致思路了。下面我們先給出一個完整示例，代碼如下所示：

<!DOCTYPE html> <html> <head><title>示例 07.06 - Particles UV</title><script src="../build/three.js"></script><script src="../build/js/controls/OrbitControls.js"></script><script src="../build/js/libs/stats.min.js"></script><script src="../build/js/libs/dat.gui.min.js"></script><script src="../jquery/jquery-3.2.1.min.js"></script><style>body {/* 設置 margin 為 0，并且 overflow 為 hidden，來完成頁面樣式 */margin: 0;overflow: hidden;}/* 統(tǒng)計對象的樣式 */#Stats-output {position: absolute;left: 0px;top: 0px;}</style> </head> <body> <div id="webgl-output"></div>  <div id="stats-output"></div> <script type="text/javascript">var scene;var camera;var render;var webglRender;//var canvasRender;var controls;var stats;var guiParams;var ground;var particle;var ambientLight;var spotLight;var axesHelper;//var cameraHelper;$(function() {stats = initStats();scene = new THREE.Scene();webglRender = new THREE.WebGLRenderer( {antialias: true, alpha: true} ); // antialias 抗鋸齒webglRender.setSize(window.innerWidth, window.innerHeight);webglRender.setClearColor(0x0F0F0F, 1.0); // 0xeeeeeewebglRender.shadowMap.enabled = true; // 允許陰影投射render = webglRender;camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 2147483647); // 2147483647camera.position.set(0, 0, 200);var target = new THREE.Vector3(10, 0 , 0);controls = new THREE.OrbitControls(camera, render.domElement);controls.target = target;camera.lookAt(target);$('#webgl-output')[0].appendChild(render.domElement);window.addEventListener('resize', onWindowResize, false);// 加入一個坐標軸：X（橙色）、Y（綠色）、Z（藍色）axesHelper = new THREE.AxesHelper(60);scene.add(axesHelper);ambientLight = new THREE.AmbientLight(0x0c0c0c);scene.add(ambientLight);spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(0, 260, 230);spotLight.shadow.mapSize.width = 5120; // 必須是 2的冪，默認值為 512spotLight.shadow.mapSize.height = 5120; // 必須是 2的冪，默認值為 512spotLight.castShadow = true;scene.add(spotLight);//cameraHelper = new THREE.CameraHelper(spotLight.shadow.camera);//scene.add(cameraHelper);// 創(chuàng)建粒子createParticles4Loader(true, 0.8, 0xffffff);/** 用來保存那些需要修改的變量 */guiParams = new function() {this.rotationSpeed = 0.001;}/** 定義 dat.GUI 對象，并綁定 guiParams 的幾個屬性 */var gui = new dat.GUI();gui.add(guiParams, 'rotationSpeed', 0, 0.02, 0.001);renderScene();});/** 渲染場景 */function renderScene() {stats.update();rotateMesh(); // 旋轉物體requestAnimationFrame(renderScene);render.render(scene, camera);}/** 初始化 stats 統(tǒng)計對象 */function initStats() {stats = new Stats();stats.setMode(0); // 0 為監(jiān)測 FPS；1 為監(jiān)測渲染時間$('#stats-output').append(stats.domElement);return stats;}/** 當瀏覽器窗口大小變化時觸發(fā) */function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();render.setSize(window.innerWidth, window.innerHeight);}/** 旋轉物體 */var step = 0;function rotateMesh() {step += guiParams.rotationSpeed;scene.traverse(function(mesh) {if (mesh instanceof THREE.Group) {mesh.rotation.x = step;//mesh.rotation.y = step;//mesh.rotation.z = step;}});}/** 創(chuàng)建 5000 個粒子 */function createParticles4Loader(transparent, opacity, color) {var group = new THREE.Group();var material = new THREE.SpriteMaterial({transparent: transparent,opacity, opacity,color: color,blending: THREE.AdditiveBlending,depthTest: false});// 把一幅外部圖片中包含的5種精靈存入一個精靈材質數(shù)組var spriteMaterials = [];var loader = new THREE.TextureLoader()for (var i = 0; i < 5; i++) {var spriteMaterial = material.clone();// 每種精靈必須單獨加載同一幅外部圖片spriteMaterial.map = loader.load('./assets/textures/particles/sprite-sheet.png');spriteMaterial.map.offset = new THREE.Vector2(0.2 * (i % 5), 0);spriteMaterial.map.repeat = new THREE.Vector2(1 / 5, 1);spriteMaterials.push(spriteMaterial);}var range = 300;for (var i = 0; i < 5000; i++) {particle = new THREE.Sprite(spriteMaterials[(i % 5)]);var x = Math.random() * range - range / 2;var y = Math.random() * range - range / 2;var z = Math.random() * range - range / 2;particle.position.set(x, y, z);group.add(particle);}group.name = "particles";scene.remove(scene.getObjectByName(group.name));scene.add(group);}</script> </body> </html>這個例子的運行效果如下所示：

在上述示例中，最核心的代碼是 createParticles4Loader() 函數(shù)中的以下代碼片段： // 把一幅外部圖片中包含的5種精靈存入一個精靈材質數(shù)組 var spriteMaterials = []; var loader = new THREE.TextureLoader() for (var i = 0; i < 5; i++) {var spriteMaterial = material.clone();// 每種精靈必須單獨加載同一幅外部圖片spriteMaterial.map = loader.load('./assets/textures/particles/sprite-sheet.png');spriteMaterial.map.offset = new THREE.Vector2(0.2 * (i % 5), 0);spriteMaterial.map.repeat = new THREE.Vector2(1 / 5, 1);spriteMaterials.push(spriteMaterial); }也就是為每一個精靈材質單獨設置其 map.offset 和 map.repeat 兩個屬性，它們均接收一個 THREE.Vector2 對象。在 map.offset 中時，這個THREE.Vector2 構造函數(shù)中的第一個 U 參數(shù)表示從圖片最左邊開始向右偏移的量（0到1之間的一個數(shù)，可以理解成百分比的小數(shù)表示法）；第二個參數(shù)則表示從圖片最上邊開始向下偏移的量（也是0到1之間的一個表示百分比的小數(shù)）。當在 map.repeat 中時，這個?THREE.Vector2 構造函數(shù)中的第一個 U 參數(shù)表示水平方向從 offset 指定的位置處向右截取的量（也是0到1之間的一個表示百分比的小數(shù)）；第二個參數(shù)則表示垂直方向從 offset 指定的位置處向下截取的量（也是0到1之間的一個表示百分比的小數(shù)）。
未完待續(xù)···

總結

以上是生活随笔為你收集整理的three.js 07-06 之 Sprite 一幅图片多个精灵的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： android is not trans
下一篇：跟班学习JavaScript第一天——运