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

九仞山

修改于 2023-05-19 09:30:35

1.4K0

修改于 2023-05-19 09:30:35

今天我们使用前面将的精灵模型来模拟一个下雪的场景使用精灵模型实现下雪场景的核心思路一.利用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()

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-04-22，如有侵权请联系 cloudcommunity@tencent.com 删除

position