wam
w__am 개발노트
wam
  • 분류 전체보기 (165)
    • CS 지식 (10)
      • 자료구조 (0)
      • 알고리즘 (0)
      • 컴퓨터 구조 (0)
      • 운영체제 (0)
      • 네트워크 (7)
      • 데이터베이스 (0)
      • 디자인 패턴 (3)
    • Frontend (131)
      • Three.js (64)
      • NPM (1)
      • Nest.js (19)
      • React (10)
      • Apollo (7)
      • TypeScript (2)
      • JavaScript (12)
      • HTML, CSS (1)
      • Jest (3)
      • E2E (5)
      • Cypress (7)
    • Database (12)
      • TypeORM (12)
    • IT 지식 (8)
      • 클라우드 서비스 (3)
      • 네트워크 (1)
      • 데이터 포맷 (2)
      • 기타 (2)
    • IT Book (2)
    • 유용한 사이트 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • 🐱 Github

인기 글

태그

  • 함수 표현식
  • getdelta()
  • isabstract
  • 오프-프레미스(off-premise) 방식
  • 함수의 범위
  • 스코프
  • reactive variables
  • gridhelper
  • getelapsedtime()
  • 함수 리터럴
  • mapped types
  • e.preventdefault()
  • 디자인 패턴
  • 삼각함수
  • axeshelper
  • 원형적인 움직임
  • three.js 구성 요소
  • 데이터 포맷
  • 렌더링 성능 최적화
  • react 성능 최적화
  • Interface
  • Decorators
  • joi 에러
  • math.cos()
  • type-graphql
  • math.sin()
  • API
  • 함수 선언문
  • 초기 환경설정
  • threejs 개발 할 때 도움을 줄 수 있는 유틸리티

최근 글

관리자

글쓰기 / 스킨편집 / 관리자페이지
hELLO · Designed By 정상우.
wam

w__am 개발노트

그룹 만들기(Scene Graph)
Frontend/Three.js

그룹 만들기(Scene Graph)

2024. 8. 28. 21:01

 

태양과 지구와 달의 자전과 공전 움직임을 그룹을 이용해 만들어보기

 

box1 = 태양, box2 = 지구, box3 = 달

  • 지구가 자전하면서 지구는 태양을 두고 공전한다.
  • 달은 자기 자체도 자전, 자전을 하면서 지구 주의를 또 도는 공전

 

 

import * as THREE from "three";
import dat from "dat.gui";

/* 주제: 그룹 만들기(Scene Graph) */

export default function example() {
  /* Renderer 만들기 : html에 캔버스 미리 만들기 */
  const canvas = document.querySelector("#three-canvas");
  const renderer = new THREE.WebGLRenderer({
    canvas,
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);

  /* Scene 만들기 */
  const scene = new THREE.Scene();

  /* Camera 만들기 */
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.y = 0;
  camera.position.z = 4;
  scene.add(camera);

  /* Light 만들기 */
  const ambientLight = new THREE.AmbientLight("white", 0.5);
  scene.add(ambientLight);

  const directionalLight = new THREE.DirectionalLight("white", 1);
  directionalLight.position.x = 1;
  directionalLight.position.z = 2;
  scene.add(directionalLight);

  /* Messh 만들기 */
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshStandardMaterial({
    color: "red"
  });

  /* Group 만들기 */
  const group1 = new THREE.Group();
  const box1 = new THREE.Mesh(geometry, material);

  const group2 = new THREE.Group();
  const box2 = box1.clone();
  box2.scale.set(0.3, 0.3, 0.3);
  group2.position.x = 2;

  const group3 = new THREE.Group();
  const box3 = box2.clone();
  box3.scale.set(0.15, 0.15, 0.15);
  box3.position.x = 0.5;

  group3.add(box3);
  group2.add(box2, group3);
  group1.add(box1, group2);
  scene.add(group1);

  // Dat GUI
  const gui = new dat.GUI();
  gui.add(camera.position, "x", -5, 5, 0.1).name("카메라 X");
  gui.add(camera.position, "y", -5, 5, 0.1).name("카메라 Y");
  gui.add(camera.position, "z", 2, 10, 0.1).name("카메라 Z");

  /* 그리기 */
  const clock = new THREE.Clock();

  function draw() {
    const delta = clock.getDelta();

    group1.rotation.y += delta;
    group2.rotation.y += delta;
    group3.rotation.y += delta;

    renderer.render(scene, camera);
    renderer.setAnimationLoop(draw);
  }

  function setSize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.render(scene, camera);
  }

  /* 이벤트 */
  window.addEventListener("resize", setSize);

  draw();
}

 

 

설명

  /* Group 만들기 */
  const group1 = new THREE.Group();
  const box1 = new THREE.Mesh(geometry, material);

  const group2 = new THREE.Group();
  // box1를 복제 후 크기를 더 작게 변경, 위치 이동
  const box2 = box1.clone();
  box2.scale.set(0.3, 0.3, 0.3);
  group2.position.x = 2;

  const group3 = new THREE.Group();
  const box3 = box2.clone();
  // box2를 복제 후 크기를 더 작게 변경, 위치 이동
  box3.scale.set(0.15, 0.15, 0.15);
  box3.position.x = 0.5;

  group3.add(box3);
  group2.add(box2, group3);
  group1.add(box1, group2); 
  scene.add(group1);

 

 

const group2 = new THREE.Group();
const box2 = box1.clone();

.clone()

  • 그대로 복제해서 같은 메쉬 만들기
  • THREE.Group() 대신 THREE.Object3D() 해도 된다.

 

 

저작자표시 변경금지

'Frontend > Three.js' 카테고리의 다른 글

Geometry 형태 조작하기  (0) 2024.08.31
여러가지 Geometry 살펴보기  (0) 2024.08.29
회전  (0) 2024.08.28
크기 조정  (0) 2024.08.28
위치 이동  (0) 2024.08.28
    'Frontend/Three.js' 카테고리의 다른 글
    • Geometry 형태 조작하기
    • 여러가지 Geometry 살펴보기
    • 회전
    • 크기 조정
    wam
    wam

    티스토리툴바