threejs4 [threejs] Mouse hover (aka.Raycaster, Gsap) Designbase 16강GSAP CDN 연결 Raycaster 사용const raycaster = new THREE.Raycatser();renderer.domElement.addEventLister('mousemove', onMouse)function onMouseMove(e){ const mouse = { x : (e.clientX / renderer.domElement.clientWidth) * 2 - 1, y : (e.clientY / renderer.domElement.clientHeight) * 2 + 1, // 보통 이렇게만 사용하니 걍 복붙하고 외우기.. } console.log(mouse.x, mouse.y);}raycaster.setFrom.. 2024. 7. 23. [threejs] 3D도형 추가 (+반응형) 3D도형을 맨드러보자https://threejs.org/docs/index.html#manual/en/introduction/Drawing-lines geometry 도형과 https://threejs.org/docs/index.html?q=geome#api/en/geometries/BoxGeometrymaterial 재질 생성 후 https://threejs.org/docs/index.html?q=material#api/en/materials/MeshStandardMaterialcube 로 생성!-검색창에 geometry, material 검색하면 다양한 도형과 재질, 그리고 사용가능한 옵션값이 상세하게 나온다. 반응형처리 // 반응형 처리 function onWindowResize() { .. 2024. 7. 23. [threejs] Renderer Scene Camera (designbase threejs 3, 7강) 기본 메뉴얼 및 문서https://threejs.org/manual/#en/fundamentalshttps://threejs.org/docs/index.html#manual/en/introduction/Installation 화면에 표시되기 위한 내용들 (3강) Renderer : 카메라에 담긴 장면을 웹사이트에 구현Scene : 배경색, 안개 등 최상위노드Camera : 장면을 화면에 담기 위한 카메라 (시야각, 카메라 시작 끝 지점 등 설정) 카메라 세팅 Fov 화각광각 63~84 / 표준 47 / 망원 28~8 Aspect 종횡비 = window.innerWidth / window.innerHeight Near, Far각자 앞, 뒤에서부터 얼마나 자를지 (hidden시킬지) 를 설정보통 near .. 2024. 7. 23. [threejs] webpack 이용한 설치 / boiler plate 디자인베이스 threejs 강의 영상 필기결제 (구독료 월 18000원) 한 김에 뽕뽑아야지강의바로가기 https://www.youtube.com/watch?v=JFX_IM2FJyQ&list=PLkbzizJk4Ae9hHI_YUD3fRv8xLfS3jGEW&index=2 webpack - 프론트앤드 모듈 번들러 : 웹 애플리케이션을 구성하는 정적 자원들을 모아 이 모듈들을 병합된 하나의 결과물(번들?)로 만드는 도구 - 웹최적화를 위해서는 웹팩을 사용하는 것이 좋다 webapck + threejs- 웹팩 전용 bolier plate (기초 골격 되어있는 오픈소스)- 강의에서 사용된 보일러플레이트 깃헙 https://github.com/aakatev/three-js-webpack1. node.js 다운 받았.. 2024. 7. 22. 이전 1 다음
