지오메트리의 args 속성 arguments의 줄임말 각 지오메트리를 위한 클래스의 생성자에 대한 인자값 ex) { refWireMesh.current.geometry = refMesh.current.geometry },[radius,widthSegments,heightSegments,phiLength,phiStart]) 속성 추가 radius 구 크기조절 widthSegments 가로줄 도형조절 heightSegments 세로줄 도형조절 phiStart 범위조절 phiLength https://threejs.org/docs/#api/en/geometries/TorusGeometry three.js docs threejs.org 좀 더 다양한 도형들은 three.js docs에서 확인가능

박스 만드는 3가지 boxGeometry 사용 Box 태그 사용 const Mybox = function(props){ const geom = new THREE.BoxGeometry() return } THREE 모듈 추가해서 함수 만든다음 박스 추가 지오메트리를 구성하는 삼각변 태그를 하나 더 만들고 emissive , wireframe 추가 ui를 통해 크기 변화 주기 npm i leva 라이브러리 설치 export default function Mythree(){ const { xSize} = useControls({ xSize: {value:1,min:0.1, max:5, step:0.01} }) useControls 추가 boxGeometry에 추가하면 오른쪽 상단에 ui가 생기면서 크기를 조절..

npm i @react-three/drei@9.0.1 3d 기능들을 쉽게 쓸 수 있게 도와주는 라이브러리 입니다 axesHelper 좌표계를 설정 할 수 있습니다 (x축은 빨강색 y축은 초록색 z축은 파랑색) postion={(0,0,0)} 을 추가해 이동 시킬 수 있습니다 OrbitControls 마우스 휠로 줌인 줌아웃이 가능하고 클릭 상태를 유지하면서 화면 위치를 변경할 수 있습니다

https://www.youtube.com/watch?v=SM97eEPXZ5U&list=PLe6NQuuFBu7HUeJkowKRkLWwkdOlhwrje&index=3 위 영상을 보고 복습하는 내용입니다 1. react 설치 npx create-react-app test01 2. react 전용 three 라이브러리 설치 npm install three @types/three @react-three/fiber 3. Canvas 불러오기 import { Canvas } from '@react-three/fiber' import './App.css'; import Mythree from './3d'; function App() { return ( ); } export default App; 는 3d 그래픽 기능..

HTTP 브라우저와 서버가 통신할 수 있도록 문서를 주고받는데 쓰이는 통신 프로토콜 통신 프로토콜 : 컴퓨터와 원거리 통신 장비 사이에 메세지를 주고받는 양식 HTTP Method GET : 서버로부터 데이터를 요청 POST : 새로운 데이터를 생성 PUT : 존재하는 데이터를 변경 DELETE : 존재하는 데이터를 삭제 HTTP StatusCode 1xx: 요청 정보 처리중 2xx: 요청을 정상적으로 처리 3xx: 요청하기위해선 추가동작 필요 4xx: 클라이언트 요청 오류 5xx: 서버 오류

예전에 nft프로젝트 하면서 만들었던 3d 슬라이드 지금봐도 정말 멋있다 코드▼ 더보기 #slideshow { font-family: 'Jua', sans-serif; margin: 0 auto; padding-top: 50px; height: 600px; /* width: 600px; */ box-sizing: border-box; margin-top: 300px; color: rgb(255, 255, 255); } .sub-heading { padding-top: 50px; font-size: 18px; } .sub-heading-two { font-size: 15px; } .sub-heading-three { font-size: 13px; } .sub-heading-four { font-size: ..