threejs物体上下浮动

---

效果图

---

添加物体

以精灵材质为例
如果场景中的物体较多不好管理，可添加分组（Group），然后将物体添加进分组中

var subent8s = [
	{
		"img":"./static/models/img/k.png",
		"name":"1s",
		"x":0,
		"y":10,
		"z":10
	},
	{
		"img":"./static/models/img/k.png",
		"name":"2s",
		"x":10,
		"y":10,
		"z":0
	},
	{
		"img":"./static/models/img/k.png",
		"name":"3s",
		"x":10,
		"y":10,
		"z":0
	}
]
function subwaye() {
  subegroup = new THREE.Group()
  subegroup.name = '浮标组'
  scene.add(subegroup)
  for (let i = 0; i < subent8s.length; i++) {
    const spriteMap = new THREE.TextureLoader().load(subent8s[i].img)
    const spriteMaterial = new THREE.SpriteMaterial({
      map: spriteMap,
      transparent: true,
      alphaTest: 0.1,
      sizeAttenuation: false
    })
    subent8 = new THREE.Sprite(spriteMaterial)
    subent8.name = subent8s[i].name
    subent8.scale.set(0.11825, 0.056, 1)
    subent8.position.set(subent8s[i].x, subent8s[i].y, subent8s[i].z)
    subegroup.add( subent8 )
  }
}

渲染

利用三角函数的 余弦cos 求得运动轨迹
【这部分写起来比较麻烦，实则就是通过余弦 cos 求得下一步要运动到的目标位置，即下一步的坐标，这个是比较简单的运动轨迹，只计算了一个Y轴，写起来也没那么复杂，如果想实现更多的运动效果，可自行算出公式嵌套即可】

function render() {
  update()
  requestAnimationFrame(render)
  renderer.render(scene, camera)
  // 浮标上下浮动 ------------遍历到这个浮标组的子模型，给每一个子模型添加运动，或者下边  ↓
  subegroup.traverse((children) => {
    const time = Date.now() * 0.005
    children.position.y = Math.cos( time ) * 0.75 + 2.25
  })
  // 浮标上下浮动-------------通过控制浮标组【subegroup】来间接控制里边几个浮标
  // const time = Date.now() * 0.005
  // subegroup.position.y = Math.cos( time ) * 0.75 + 2.25
}

应用

广告牌等标识性物体