入门之十五：使用精灵模拟下雪效果"/>
Threejs入门之十五：使用精灵模拟下雪效果
今天我们使用前面将的精灵模型来模拟一个下雪的场景
使用精灵模型实现下雪场景的核心思路
一.利用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坐标每次减1sprite.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()
刷新浏览器查看效果
效果完成
完整代码可通过以下网址下载：
核心代码如下
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坐标每次减1sprite.position.y -= 1// 雪花的y坐标每次减t*60// sprite.position.y -= t*60if(sprite.position.y < 0 ){// 如果雪花落到地面，重置y，重新下落sprite.position.y = 800}})requestAnimationFrame(snowLoop)
}
snowLoop()
function animation() {requestAnimationFrame(animation)renderer.render(scene,camera)
}
animation()
更多推荐
Threejs入门之十五：使用精灵模拟下雪效果
发布评论