이전에 만든 육면체 객체의 와이어프레임을 선으로 그린 라인 세그먼트즈 객체를 육면체 객체와 결합해 보겠습니다.
객체들을 결합하기 위해서 Group(그룹)을 사용하면 됩니다.
Group(그룹)은 객체들을 결합시켜 하나의 객체(Object3D)를 생성합니다.
1. 객체를 합치기 전에 육면체 객체(box1)와 라인 세그먼트즈 객체(box1WireframeLine)를 Scence(씬, 장면)에 추가되지 않게 주석처리합니다.
// 장면에 육면체 객체 추가
//scene.add(box1);// 장면에 라인 세그먼트즈 객체 추가
//scene.add(box1WireframeLine);
2. 라인 세그먼트즈 객체(box1WireframeLine)의 라인 색상을 붉은색에서 짙은 녹색으로 변경하고 위치(position)를 육면체 객체와 동일하게 합니다.
// 선 색상을 짙은 녹색으로 변경
box1WireframeLine.material.color = new THREE.Color(0x006400);
// 육면체 객체와 결합하기 위해 육면체 객체의 위치를 복사하여 라인 세그먼트즈 객체의 위치 설정
box1WireframeLine.position.copy(box1.position);
3. 객체들을 결합하기 위해 Group(그룹)을 생성하고 Group(그룹)에 육면체 객체(box1)와 라인 세그먼트즈 객체(box1WireframeLine)를 추가합니다. 그리고 생성된 Group(그룹)를 Scence(씬, 장면)에 추가합니다.
// 육면체 객체와 라인 세그먼트즈 객체를 결합하기 위한 육면체 그룹 생성
const box1Group = new THREE.Group();
// 그룹에 육면체 객체 추가
box1Group.add(box1);
// 그룹에 라인 세그먼트즈 객체 추가
box1Group.add(box1WireframeLine);
// 장면에 육면체 그룹 추가
scene.add(box1Group);
육면체 객체에 와이어프레임이 결합되어 보입니다.
4. 라인 세그먼트즈 객체(box1WireframeLine)가 육면체 객체와 결합될 때 투명하게 결합되게 설정을 추가합니다.
Material(머티리얼)의 opacity은 0.0에서 부터 1.0까지 값을 가질 수 있습니다. opacity 값이 낮을수록 더 투명해집니다.
// 선이 투명해지게 설정
box1WireframeLine.material.transparent = true;
// 선의 불투명도를 낮게 설정
box1WireframeLine.material.opacity = 0.3;
5. 육면체 그룹 객체가 회전되게 주석처리된 육면체 객체를 육면체 그룹 객체로 변경하고 주석을 해제시킵니다.
// 애니메이팅
function animate() {
box1Group.rotation.x += 0.01;
box1Group.rotation.y += 0.01;
box1Group.rotation.z += 0.01;
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(animate);
};
구 객체(sphere1)도 라인 세그먼트즈 객체(sphere1WireframeLine)와 결합되도록 처리합니다.
1. 구 객체(sphere1)를 Scence(씬, 장면)에 추가되지 않게 주석처리합니다.
// 장면에 구 객체 추가
//scene.add(sphere1);
2. 라인 세그먼트즈 객체(sphere1WireframeLine)의 라인 색상을 붉은색에서 흰색으로 변경하고 위치(position)를 구 객체와 동일하게 하고 투명하게 결합되게 설정을 추가합니다. 그리고 라인 세그먼트즈 객체(sphere1WireframeLine)를 Scence(씬, 장면)에 추가되지 않게 주석처리합니다.
// 선 색상을 짙은 흰색으로 변경
sphere1WireframeLine.material.color = new THREE.Color(0xffffff);
// 선이 투명해지게 설정
sphere1WireframeLine.material.transparent = true;
// 선의 불투명도를 낮게 설정
sphere1WireframeLine.material.opacity = 0.3;
// 구 객체와 결합하기 위해 구 객체의 위치를 복사하여 라인 세그먼트즈 객체의 위치 설정
sphere1WireframeLine.position.copy(sphere1.position);
// 장면에 라인 세그먼트즈 객체 추가
//scene.add(sphere1WireframeLine);
3. 객체들을 결합하기 위해 Group(그룹)을 생성하고 Group(그룹)에 구 객체(sphere1)와 라인 세그먼트즈 객체(sphere1WireframeLine)를 추가합니다. 그리고 생성된 Group(그룹)를 Scence(씬, 장면)에 추가합니다.
// 구 객체와 라인 세그먼트즈 객체를 결합하기 위한 구 그룹 생성
const sphere1Group = new THREE.Group();
// 그룹에 구 객체 추가
sphere1Group.add(sphere1);
// 그룹에 라인 세그먼트즈 객체 추가
sphere1Group.add(sphere1WireframeLine);
// 장면에 구 그룹 추가
scene.add(sphere1Group);
이제 three.js 사이트의 doc에 있는 예제처럼 보입니다.
각 객체의 Segments(세그먼트, 분절 수)를 변경시켜 변화되는 모습을 보시기 바랍니다.