분류 전체보기

그룹 만들기(Scene Graph)

태양과 지구와 달의 자전과 공전 움직임을 그룹을 이용해 만들어보기 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({ ca..

회전

rotation// Three.js 필수 구성 요소 초기화const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 큐브 생성const geometry = new THREE.BoxGeometry(); // 기본 1x1x1 크기의 박스const material = new T..

크기 조정

position// Three.js 필수 구성 요소 초기화const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 큐브 생성const geometry = new THREE.BoxGeometry(); // 기본 1x1x1 크기의 박스const material = new T..

위치 이동

position// Three.js 기본 설정 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 첫 번째 큐브 생성 (기본 위치) const geometry1 = new THREE.BoxGeometry(); co..