用threejs + vue3 写持续下雨效果

1 首先threejs还是老样子 , 创建场景 + 相机 + 立方体 + 渲染器(并将渲染器添加到页面) + 轨道控制器 + animate让立方体动起来 + 坐标轴 

<script setup>
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js' // 导入轨道控制器

// 创建场景
const scene = new THREE.Scene()

// 创建相机
const camera = new THREE.PerspectiveCamera()
camera.position.y = 5
camera.position.z = 10

// 创建立方体
const geometry = new THREE.BoxGeometry(5, 5, 5)
const material = new THREE.MeshBasicMaterial({
  color: 0x00ff00,
  wireframe: true                                             // 骨架结构的立方体
})
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

// 创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
// 将染器添加到页面
document.body.appendChild(renderer.domElement)

// 添加坐标轴,用来识别3d的方向,通常x红色,y绿色,z蓝色
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)

// 添加轨道控制器  接受俩个参数(相机,当前页面)  就可以实现鼠标拖动效果了
const controls = new OrbitControls(camera, renderer.domElement)

// 阻尼效果 可以让滑动的时候更丝滑
controls.enableDamping = true
controls.dampingFactor = 0.01 //阻尼的程度


// 让立方体动起来
function animate () {
  requestAnimationFrame(animate)

  // 轨道控制器更新
  controls.update()
  renderer.render(scene, camera)
}
animate()
</script>

目前的效果应该是下图这样 , 且能用鼠标控制视角和立方体的移动 

拓 : 如果效果图是"死的"不能移动 , 应是下面俩个地方有问题
1.1  查看是否正确引入了控制器 ; 是否更新了控制器
1.2   是否在animate中添加了requestAnimationFrame(animate)

2 创建1000个3d立方体作为雨滴

// 创建1000个垂直的平面当做雨滴
const boxGeometry = new THREE.BoxGeometry(0.04, 0.38, 0.04)
const planeMaterial = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  transparent: true,
  opacity: 0.3,
  side: THREE.DoubleSide //解决旋转视角,雨滴会消失的问题
})

const raindrops = [] // 存储雨滴网格对象的数组
for (let i = 0; i < 1000; i++) {
  const plane = new THREE.Mesh(boxGeometry, planeMaterial)
  plane.position.x = Math.random() * 10 - 5
  plane.position.y = Math.random() * 10 - 5
  plane.position.z = Math.random() * 10 - 5
  scene.add(plane)
  raindrops.push(plane) // 将雨滴网格对象添加到数组中
}

目前实现了静态的雨滴效果

3 让雨滴动起来 , 并改变雨滴的下落方向

function animate () {
  requestAnimationFrame(animate)
  // cube.rotation.x += 0.01
  // cube.rotation.y += 0.01

  // 更新每个雨滴的位置
  for (let i = 0; i < raindrops.length; i++) {
    const raindrop = raindrops[i]

    // 给每个雨滴添加一个初始的旋转角度,这样可更改雨滴的下落方向
    raindrop.rotation.x = 5
    raindrop.rotation.y = 5
    raindrop.rotation.z = 5

    // 修改雨滴的位置，使其沿斜向下落
    raindrop.position.y -= 0.1 // 修改雨滴下降速度

    // 当雨滴超出范围时重新回到顶部
    if (raindrop.position.y < -5) {
      raindrop.position.y = 5 // 雨滴重新回到顶部,数值越小回的越快
    }
  }

  // 轨道控制器更新
  controls.update()
  renderer.render(scene, camera)
}
animate()

完成了动态下雨效果

拓 : 代码中涉及到很多threejs的相关属性 , 大家可以去官网查看
官网地址: 

three.js docs (threejs.org)https://threejs.org/docs/index.html?