정원

three.js journey강의를 듣고 작성합니다.OrbitControls✏️  마우스로 3d씬을 줌, 이동할 수 있도록 해주는 카메라 컨트롤러three.js 의 OrbitControls.js를 쉽게 사용할 수 있도록 한 버전 enableZoom줌 활성화 여부trueenableRotate회전 활성화 여부trueenablePan이동(Pan) 활성화 여부trueminDistance카메라 최소 줌 거리0maxDistance카메라 최대 줌 거리InfinityminPolarAngle아래쪽 회전 제한 (0이면 하단 완전 제한)0maxPolarAngle위쪽 회전 제한 (Math.PI이면 상단 완전 제한)Math.PItarget카메라가 바라볼 중심점[0, 0, 0]     makeDefaultorbitcontrols..

three.js journey강의를 듣고 작성합니다. 리액트 스크립트로 하려니까 계속 에러가 났음vite로 하니까 빠르고 잘된다 import {Canvas} from "@react-three/fiber";import Three from "./Three.jsx";function App() { return ( )}export default App 컴포넌트 호출하듯이 사용하면 된다부모 Canvas로 감싸주고 그안에 three라는 컴포넌트 호출함 아래는 three 컴포넌트 코드이다 import { extend, useFrame, useThree} from "@react-three/fiber";import { useRef} from "react";impor..

three.js journey강의를 듣고 작성합니다. Three.js는 정점(Vertex)과 삼각형(Face)으로 Mesh를 만든다.3개의 정점(Vertex)으로 삼각형을 만들고, 이를 여러 개 이어서 객체를 구성한다.BoxGeometry6개의 매개변수가 있음width, height, depth, widthSegments, heightsegments, depthsegments   BufferGeometryattribute 기반 구조를 사용해 float32array:형식화된 배열 , float만 저장할 수 있음 , 고정된 길이 가지고있음모든값을 넣어야하는 1차원 배열const positionsArray = new Float32Array([ 0,0,0, 0,1,0, 1,0,0])const p..

three.js journey강의를 듣고 작성합니다. AnimationRequestAnimationFramejs에서 제공하는 메서드매 프레임마다 호출되어 다음 프레임에 호출할 애니메이션을 지정하고 이를 호출하는 메서드/** * Animate */const tick = () =>{ // Update objects mesh.rotation.y += 0.01 // Render renderer.render(scene, camera) // Call tick again on the next frame window.requestAnimationFrame(tick)}tick() data data.nowclock (three.js 내장 메서드)gasp cameraArrayCamera- 여..

three.js journey강의를 듣고 작성합니다. Three.js 구현하기위한 기본구성 5가지 import * as THREE from 'three';import gsap from 'gsap'const canvas = document.querySelector('canvas.webgl')//sceneconst scene = new THREE.Scene()//objectconst geometry = new THREE.BoxGeometry(1,1,1) //BoxGeometry(width, height, depth)const material = new THREE.MeshBasicMaterial({color:0xff0000})const mesh = new THREE.Mesh(geometry, material)..