소개

경위

아티팩트

파티클의 데이터 구조

• mesh (three.js 메쉬)
• xDirection (메쉬의 가로축 제어 속성)
• yDirection (메쉬의 세로축 제어 속성)
• xMoveSpeed ​​(메쉬의 가로축 방향으로 속도 제어 속성)
• yMoveSpeed ​​(메쉬의 세로축 방향으로 속도 제어 속성)
• lifeCount (메시가 화면에 표시되는 수명)

mesh 를 500개 생성하여 화면 중앙에서 상하 좌우 외측 프레임 방향으로 방사상으로 확산합니다.

메쉬의 크기와 속도는 무작위로 배출되며 opacity의 값은 화면 중앙에서 멀어짐에 따라 낮은 값입니다.

파티클 거동

function updateCircles () {
  for (let i = 0; i < circles.length; i++) {
    circles[i].mesh.material.opacity -= circles[i].lifeCount

    if (circles[i].mesh.material.opacity <= 0) {
      circles[i].mesh.position.x = -0.5 + Math.random() * 1
      circles[i].mesh.position.y = -0.5 + Math.random() * 1
      circles[i].mesh.material.opacity = 1.0
    }

    circles[i].mesh.position.x += circles[i].xMoveSpeed * (circles[i].xDirection ? 1 : -1)
    circles[i].mesh.position.y += circles[i].yMoveSpeed * (circles[i].yDirection ? 1 : -1)
  }
}

그리기 프레임마다 메쉬를 투과해 가, opacity 의 값이 0 이 되면, 메쉬의 좌표를 초기치로 해, opacity 를 1 로 되돌립니다. 이와 같이 메쉬의 재이용을 실시하는 것으로, 필요한 최소한의 수의 묘화로 끝납니다.

파티클의 가산 합성

opacity: 0.7,
blending: THREE.AdditiveBlending

메쉬에 opacity 와 blending 를 설정하고, 투과시켜 가산 합성을 실시하는 것으로, 빛 빛을 내고 있습니다.

감상

당신의 자신은, 라고 할까 지금의 자신도, JavaScript의 기초도 배우면서 three.js 를 학습하고 있는 중이므로, 특별 깨끗한 코드를 쓰거나, 기능적인 구조로 되어 있는 프로그램 만드는 것은 여전히 ​​매우 어렵습니다.

자신이 머리 속에서 이미지한 표현과 차이가 없는 아웃풋을 할 수 있게 되는 것을 목표로 앞으로도 학습한 것을 아웃풋하면서 힘을 써 가고 싶습니다.