Particle 만들기 - 좌표에 mesh 생성하기

1. Geometry: PlaneGeometry

2. Material: MeshBasicMaterial

3. Mesh: Mesh

4. TextureLoader

 

Sphere 의 vertex 위치에 Plane Mesh를 넣어보자.

 

핵심: SphereGeometry 의 x, y, z 좌표들 찾기(SphereGeometry.attributes.position.array)

 

// Plane geometry
const geometry = new THREE.PlaneGeometry(.3, .3)

const material = new THREE.MeshBasicMaterial({
    color: 'red',
    side: THREE.DoubleSide // material 의 양면(앞, 뒤)를 모두 보여주도록 세팅
});

// Sphere geometry 에서 좌표값 찾기
// 우선 SphereGeometry 객체 만들기
const sphereGeometry = new THREE.SphereGeometry(1, 8, 8);

// 위에서 만들 SphereGeometry를 구성하는 좌표(x, y, z) 찾기    
const positionArray = sphereGeometry.attributes.position.array;

// 찾아낸 Sphere 좌표에 Plane 위치 넣기
for(let i = 0; i < positionArray.length; i += 3){ // 0, 3, 6... 3의 배수
    let plane = planeMesh.clone();
    plane.position.x = positionArray[i]; // 배열의 0번째, 3번째, 6번째... 위치
    plane.position.y = positionArray[i + 1]; // 배열의 1번째, 4번째, 7번째... 위치
    plane.position.z = positionArray[i + 2]; // 배열의 2번째, 5번쨰, 8번째... 위치

    plane.lookAt(0, 0, 0);

    scene.add(plane)
};

 

 

for 구분에 "i", "i + 1", "i +2"는 각각 i = x, i + 1 = y, i + 2 = z 를 의미한다. 즉, 위에서 찾아낸 x, y, z의 좌표를 가져와서 Plane 의 position.x / position.y / position.z 에 넣어주면된다.

 

오른쪽은 lookAt(0, 0, 0)이 없을때, Sphere 의 가운데를 보지 않는 상태