three.js版本："three": "^0.136.0"
1.初始化场景、相机、渲染器
// 创建场景、相机、渲染器
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 10000);
this.camera.position.set(1000,500, 5560);
this.renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true,//是否执行抗锯齿。默认为false.
});
this.renderer.compile(scene, camera)
this.renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( this.renderer.domElement );
2.使用控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
this.controls = new OrbitControls(this.camera, renderer.domElement);3.天气效果
3.1 下雨效果
要创建下雨效果，你可以使用Three.js的例子系统来模拟雨滴。你可以创建一个包含很多雨滴的粒子系统，并使其沿着场景的Z轴方向下落。下面是一个简单的例子，使用Three.js实现下雨效果：
雨滴和雪花图片
this.geom =null;
this.drops = 20000; //雨滴数量
this.raindropSpeed=5 //雨滴下落速度
this.group= new THREE.Group();
//
createRain(){
//加载雨滴图片
let rain = require('@/assets/2Dthumbnail/rain.png')
const texture = new THREE.TextureLoader().load(rain)
// 定义顶点数据
const positions = new Float32Array(this.drops * 3);
const velocities = new Float32Array(this.drops * 3);
this.geom = new THREE.BufferGeometry()
// 生成雨滴位置
for(let i = 0; i < this.drops; i++){
positions[i * 3] = (Math.random() - 0.5) * 16000; // x
positions[i * 3 + 1] = Math.random() * 5000; // y
positions[i * 3 + 2] = (Math.random() - 0.5) * 16000; // z
//雨滴位移速度
velocities[i * 3] = 0; // x
velocities[i * 3 + 1] = -this.raindropSpeed; // y
velocities[i * 3 + 2] = 0; // z
}
this.geom.setAttribute('position', new THREE.BufferAttribute(positions, 3));
this.geom.setAttribute('velocity', new THREE.BufferAttribute(velocities, 3));
// 创建雨滴材质
const rainMaterial = new THREE.PointsMaterial({
//color: 0xffffff,
size: 10,
map: texture,
transparent: true,
blending: THREE.AdditiveBlending, // 融合模式
depthTest: false, // 可以去掉texture的黑色背景
});
let Points = new THREE.Points(this.geom, rainMaterial)
return Points
}
this.group.name="下雨"
this.group.add(this.createRain())
this.scene.add(this.group) //添加到场景中3.2 下雪效果
要模拟下雪，可以使用类似模拟下雨的方法，但需要将雨滴替换成雪花，并使它们在飘落时随机飘散，以模拟雪花的自然运动
createSnow(){
...... //大部分代码与下雨效果都是一样的
for(let i = 0; i < this.drops; i++){
positions[i * 3] = (Math.random() - 0.5) * 16000; // x
positions[i * 3 + 1] = Math.random() * 5000; // y
positions[i * 3 + 2] = (Math.random() - 0.5) * 16000; // z
// 修改雪花坠落位置数据，使其x、z方向上可以晃动飘落；修改dropSpeed坠落速度，雪花的速度会慢一些
velocities[i * 3] = (Math.random() - 0.5) / 3*this.dropSpeed; // x
velocities[i * 3 + 1] = -this.dropSpeed+ (Math.random() / 5*this.dropSpeed); // y
velocities[i * 3 + 2] = (Math.random() - 0.5) / 3*this.dropSpeed; // z
// 雪花的随机旋转角度
snowflakeRotations[i * 3] = Math.random() * 2 * Math.PI;
snowflakeRotations[i * 3 + 1] = Math.random() * 2 * Math.PI;
snowflakeRotations[i * 3 + 2] = Math.random() * 2 * Math.PI;
}
this.geom.setAttribute('position', new THREE.BufferAttribute(positions, 3));
this.geom.setAttribute('velocity', new THREE.BufferAttribute(velocities, 3));
this.geom.setAttribute('rotation', new THREE.BufferAttribute(snowflakeRotations, 1 ));
}
4.更新帧动画
我们使用requestAnimationFrame函数来每秒更新画面，并使用renderer对象来渲染场景。文章来源：https://www.toymoban.com/news/detail-644873.html
render() {
requestAnimationFrame( this.render );
this.updateDrops();
this.renderer.render( this.scene, this.camera );
} updateDrops() {
const positions = this.geom.attributes.position.array;
const velocities = this.geom.attributes.velocity.array;
for(let i=0; i<this.drops;i++){ //change Y
// 更新雨滴位置
positions[i * 3] += velocities[i * 3];
positions[i * 3 + 1] += velocities[i * 3 + 1];
positions[i * 3 + 2] += velocities[i * 3 + 2];
// 如果雨滴落到了地面，重新回到顶部
if (positions[i * 3 + 1] < -500) {
positions[i * 3] = (Math.random() - 0.5) * 16000; // x
positions[i * 3 + 1] = Math.random() * 5000; // y
positions[i * 3 + 2] = (Math.random() - 0.5) * 16000; // z
}
}
this.geom.attributes.position.needsUpdate = true
this.group.position.copy( this.camera.position ); //不管放大还是缩小 雨滴不会改变
}this.group.position.copy( this.camera.position ); 这句话很重要，将效果模型放在摄像机前面，避免出现放大缩小场景时天气效果无法覆盖整个场景的情况文章来源地址https://www.toymoban.com/news/detail-644873.html
到了这里，关于three.js实现下雨、下雪天气模拟的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
