Threejs入门之十五：使用精灵模拟下雪效果

九仞山

已于 2023-04-22 12:14:27 修改

阅读量641

点赞数 2

分类专栏： ThreeJS 文章标签： javascript html5 3d

于 2023-04-05 23:54:31 首次发布

本文链接：https://blog.csdn.net/w137160164/article/details/129979593

版权

ThreeJS 专栏收录该内容

42 篇文章 83 订阅

订阅专栏

今天我们使用前面将的精灵模型来模拟一个下雪的场景
使用精灵模型实现下雪场景的核心思路
一.利用for循环随机生成雪花，生成的雪花位置随机
二.雪花下落动画，定义一个函数，让其y坐标递减，判断当y坐标值小于0时，重新将其设置为800
三.利用requestAnimationFrame循环执行上面的函数
实现代码如下：
1.新建文件夹，命名为snow，在该文件夹下新建一个images文件夹用于存放雪花图片
2.在根目录新建index.html文件和index.js文件
3.在index.html文件中引入threejs和index.js，并新建一个id为webgl的div

<body>
  <div id="webgl"></div>
  <script type="importmap">
    {
      "imports":{
        "three":"../../three.js/build/three.module.js",
        "three/addons/": "../../three.js/examples/jsm/"
      }
    }
  </script>
  <script type="module" src="./index.js"></script>
</body>

4.在index.js中引入threejs，并创建场景，设置常见背景色

import * as THREE from 'three'
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
// 场景
const scene = new THREE.Scene()
scene.background = new THREE.Color(0x111111)

5.使用纹理加载器TextureLoader加载雪花图片，并将台作为精灵材质的参数给到精灵材质

// 使用纹理加载器加载雪花图片
const texture = new THREE.TextureLoader().load('./images/snow.png')
// 精灵材质
const spriteMaterial = new THREE.SpriteMaterial({
  map:texture
})

6.创建一个组对象，作为精灵的集合

const group = new THREE.Group()

7.循环创建精灵，并利用随机函数来设置每个精灵x、y、z的位置

// 循环创建精灵，并利用随机函数来设置每个精灵x、y、z的位置
for (let i = 0; i < 20000; i++) {
  // 精灵
  const sprite = new THREE.Sprite(spriteMaterial)
  // 添加到组
  group.add(sprite)
  // 设置精灵缩放比例
  sprite.scale.set(1,1,1)
  // 设置精灵模型位置，在长方体空间上随机分布
  const x = 1000 * (Math.random() - 0.5)
  const y = 800 * Math.random()
  const z = 1000 * (Math.random() - 0.5)
  sprite.position.set(x,y,z)
}

8.将组添加的场景中，并创建相机

scene.add(group)
const width = window.innerWidth
const height = window.innerHeight
const camera = new THREE.PerspectiveCamera(75,width / height,10,600 )
camera.position.set(200,200,200)
camera.lookAt(0,0,0)

9.创建渲染器，设置其大小，并将其绑定到div

const renderer = new THREE.WebGLRenderer()
renderer.setSize(width,height)
document.getElementById('webgl').appendChild(renderer.domElement)

10.创建轨道控制器，使鼠标可以控制相机

const controls = new OrbitControls(camera,renderer.domElement)

11.创建一个函数snowLoop，在该函数中让精灵模型的y轴坐标自减1，并判断精灵模型当前的y坐标是否小于0，如果小于0，重新设置精灵的y轴坐标为800

// 周期性改变雪花Sprite位置
function snowLoop() {  
  group.children.forEach(sprite => {
    // 雪花的y坐标每次减1
    sprite.position.y -= 1 
    if(sprite.position.y < 0 ){
      // 如果雪花落到地面，重置y，重新下落
      sprite.position.y = 800
    }
  })
  requestAnimationFrame(snowLoop)
}
//调用函数
snowLoop()

12.定义animation函数，利用requestAnimationFrame定时渲染渲染器

function animation() {
  requestAnimationFrame(animation)
  renderer.render(scene,camera)
}
animation()

刷新浏览器查看效果
在这里插入图片描述
效果完成
完整代码可通过以下网址下载：https://download.csdn.net/download/w137160164/87656999
核心代码如下

import * as THREE from 'three'
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
// 场景
const scene = new THREE.Scene()
scene.background = new THREE.Color(0x111111) 
// 使用纹理加载器加载雪花图片
const texture = new THREE.TextureLoader().load('./images/snow.png')
// 精灵材质
const spriteMaterial = new THREE.SpriteMaterial({
  map:texture
})
// 精灵
// const sprite = new THREE.Sprite(spriteMaterial)
// 创建组，用于存放精灵
const group = new THREE.Group()
// 循环创建精灵，并利用随机函数来设置每个精灵x、y、z的位置
for (let i = 0; i < 20000; i++) {
  // 精灵
  const sprite = new THREE.Sprite(spriteMaterial)
  // 添加到组
  group.add(sprite)
  // 设置精灵缩放比例
  sprite.scale.set(1,1,1)
  // 设置精灵模型位置，在长方体空间上随机分布
  const x = 1000 * (Math.random() - 0.5)
  const y = 800 * Math.random()
  const z = 1000 * (Math.random() - 0.5)
  sprite.position.set(x,y,z)
}
scene.add(group)
const width = window.innerWidth
const height = window.innerHeight
const camera = new THREE.PerspectiveCamera(75,width / height,10,600 )
camera.position.set(200,200,200)
camera.lookAt(0,0,0)

const renderer = new THREE.WebGLRenderer()
renderer.setSize(width,height)

document.getElementById('webgl').appendChild(renderer.domElement)
const controls = new OrbitControls(camera,renderer.domElement)
// 创建时间，利用时间的getDelta() 获取当前的秒数，作为参数来改变精灵y轴的坐标
const clock = new THREE.Clock() 


// 周期性改变雪花Sprite位置
function snowLoop() { 
  const t = clock.getDelta() 
  group.children.forEach(sprite => {
    // 雪花的y坐标每次减1
    sprite.position.y -= 1
    // 雪花的y坐标每次减t*60
    // sprite.position.y -= t*60
    if(sprite.position.y < 0 ){
      // 如果雪花落到地面，重置y，重新下落
      sprite.position.y = 800
    }
  })
  requestAnimationFrame(snowLoop)
}
snowLoop()
function animation() {
  requestAnimationFrame(animation)
  renderer.render(scene,camera)
}
animation()