three.js粒子系统-两个场景渲染在一个页面(vue中使用three.js46)

最新推荐文章于 2025-09-24 12:24:17 发布

原创

最新推荐文章于 2025-09-24 12:24:17 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#three.js #webgl #js #vue

博客介绍了使用Three.js和WebGL在Vue中进行场景渲染和创建动画的方法。先创建两个场景和相机，通过渲染器将场景融合；接着获取贴图，创建点精灵材质、精灵并添加到场景，最后创建精灵动画。还展示了demo效果和代码。

两个场景渲染在一个页面

1.场景渲染
2.创建左右移动的小怪兽
3.demo效果
4.demo代码

1.场景渲染

1.1创建两个场景

我们需要把两个场景渲染在同一个页面那么首先创建两个场景，具体如下：

// 创建场景
createScene () {
   
   
  // 创建一个场景
  this.scene = new THREE.Scene()
  // 创建另一个场景
  this.spriteScene = new THREE.Scene()
}

1.2创建两个相机

这一步创建两个相机第一个相机为透视相机，第二个是正投影相机，创建第二个相机时需要注意将左边界设置为0，这样渲染时就可以把第二个场景全部展示到屏幕中，具体如下

// 创建相机
createCamera () {
   
   
  const element = document.getElementById('container')
  const width = element.clientWidth // 窗口宽度
  const height = element.clientHeight // 窗口高度
  const k = width / height // 窗口宽高比

  // 创建第一个相机
  this.camera = new THREE.PerspectiveCamera(45, k, 0.1, 200)
  this.camera.position.set(0, 0, 100) // 设置相机位置

  this.camera.lookAt(new THREE.Vector3(10, 0, 0)) // 设置相机方向
  this.scene.add(this.camera)

  // 创建第二个相机
  // THREE.OrthographicCamera( left,right,top,bottom,near,far)
  // 创建时注意这个相机是正投影相机，左边界是0，这样是为了把第二个场景全部展示到屏幕中
  this.spriteCamera = new THREE.OrthographicCamera(
    0,
    width,
    height,
    -50,
    0,
    20
  )
}

1.3通过渲染器将两个场景融合

在render()函数中渲染两个场景

// 渲染第一个场景
this.renderer.render(this.scene, this.camera)
// 渲染器是否在渲染每一帧之前自动清除其输出,设置为false
this.renderer.autoClear = false
// 渲染第二个场景 即可将两个场景融合
this.renderer.render(this.spriteScene, this.spriteCamera)

2.创建左右移动的小怪兽

2.1获取贴图

// 获取贴图
getTexture () {
   
   
  const THIS = this
  const textureLoader = new THREE.TextureLoader()
  const loadTexture = textureLoader.load(
    `${
     
     THIS.publicPath}images/sprite-sheet.png`
  )
  return loadTexture
}

2.2 通过贴图创建点精灵材质

createSpriteMaterial () {
   
   
  const spriteMaterial = new THREE.SpriteMaterial({
   
   
    transparent: this.properties.transparent,
    opacity: this.properties.opacity.value,
    color: this.properties.color,
    map: this.getTexture()
  })

  spriteMaterial.map.offset = new THREE.Vector2(
    0.2 * this.properties.sprite.value,
    0
  )
  spriteMaterial.map.repeat = new THREE.Vector2(1 / 5, 1)
  spriteMaterial.depthTest = false

  spriteMaterial.blending = THREE.AdditiveBlending
  return spriteMaterial
}

2.3 创建精灵并添加到场景

createSprite () {
   
   
  this.sprite = new THREE.Sprite(this.createSpriteMaterial())
  this.sprite.scale.set(
    this.properties.size.value,
    this.properties.size.value,
    this.properties.size.value
  )