效果圖
在線演示地址：
http://oa.hopenchina.com:8086/webgl/sprite.html
完整代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script src="js/three.min.js"></script> <script src="js/OrbitControls.js"></script> <script> //創建場景 var scene = new THREE.Scene(); /** * 相機設置 */ var width = window.innerWidth-16; //窗口寬度 var height = window.innerHeight-20; //窗口高度 var k = width / height; //窗口寬高比 /**透視投影相機對象*/ var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000); camera.position.set(292, 109, 268);//設置相機位置 /** * 創建渲染器對象 */ var renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height);//設置渲染區域尺寸 renderer.setClearColor(0x666666, 1); //設置背景顏色 document.body.appendChild(renderer.domElement); //body元素中插入canvas對象 //點光源 var point = new THREE.PointLight(0xffffff); point.position.set(400, 200, 300); //點光源位置 scene.add(point); //點光源添加到場景中 /** * 精靈創建下雨效果 */ // 加載雨滴理貼圖 var textureTree = new THREE.TextureLoader().load("img/rain.png"); // 創建一個組表示所有的雨滴 var group = new THREE.Group(); // 批量創建雨滴精靈模型 for (let i = 0; i < 400; i++) { var spriteMaterial = new THREE.SpriteMaterial({ map:textureTree,//設置精靈紋理貼圖 }); // 創建精靈模型對象 var sprite = new THREE.Sprite(spriteMaterial); scene.add(sprite); // 控制精靈大小, sprite.scale.set(8, 10, 1); //// 只需要設置x、y兩個分量就可以 var k1 = Math.random() - 0.5; var k2 = Math.random() - 0.5; // 設置精靈模型位置，在空間中隨機分布 sprite.position.set(1000 * k1, 300 * Math.random(), 1000 * k2) group.add(sprite); } scene.add(group);//雨滴群組插入場景中 // 渲染函數 function render() { // 每次渲染遍歷雨滴群組，刷新頻率30~60FPS，兩幀時間間隔16.67ms~33.33ms // 每次渲染都會更新雨滴的位置，進而產生動畫效果 group.children.forEach(sprite => { // 雨滴的y坐標每次減1 sprite.position.y -= 1; if (sprite.position.y < 0) { // 如果雨滴落到地面，重置y，從新下落 sprite.position.y = 200; } }); renderer.render(scene, camera); //執行渲染操作 requestAnimationFrame(render);//請求再次執行渲染函數render，渲染下一幀 } render(); var controls = new THREE.OrbitControls(camera, renderer.domElement); //創建鼠標控制對象 //尺寸響應式 window.addEventListener('resize', () => { //初始化攝像機 camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); //初始化渲染器 renderer.setSize(window.innerWidth, window.innerHeight); }) </script> </body> </html>