javascript/interaction7 [three.js] ftp업로드시 오류 (node.js) 강의 보고 포트폴리오를 만들었는데분명 로컬에서는 잘되고 ftp올리면 오류가 난다............... 올리는 파일은 node_modules 제외, 분명히 package.js , -lock 있을시 포함webpack.config까지 싹 다 올렸는데도 bundle.js 에서 오류가 나면서 onclick 관련 오류가 뜸Uncaught TypeError: Cannot set properties of null (setting 'onclick') THREEjs,GIFTLOADER 찾을 수 없고 계속 WEBGL 모르쇠 ㅋUncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either .. 2024. 8. 20. [gsap] scrollTrigger start end scrollTrigger start/end나만 헷갈리나;'.. 정리된게 별루 없구 읽어봐도 이해가 잘 안돼서 사실 marker 찍어서 테스트 해보면 되긴하는데 나중에 또 테스트 안하고도 바로바로 적용하기 위해설명충st로 투머치하게 기록남겨놓아보려고 한다. scroller-start end : fixedstart end : relative - 값을 하나만 넣을시 : scroll-start/end = 지점 0 고정뷰표트 0 고정으로 사용애니메이션 start/ end 지점만 설정애니메이션 시작/끝지점을 트리거로부터 얼만큼 떨어트릴지를 정하게 된다.많이 쓰는 offset top 생각하면 될 듯주의할건 end 라고 해서 밑이 기준이 되는게 아니다. 걍 start랑 같다고 생각하면 된다start: "0", .. 2024. 8. 9. [threejs] curved view canvas html dom 가서미 웅장해지는 숏츠를 보았다https://www.youtube.com/shorts/Ty7j_v4t7ks 커브드 되는 3d 구현하는 30초짜리 숏츠였는데요 포맷을 이용하면 내가 구현하고 싶었던 씬을 만들수 있을거 같아서 도전!!!!!! 해봣는데 음 . . . ...... 자바스크립트만으로 구현하기는 어려울거 같다저거 자바스크립트인줄아랏는데 glsl? 확장자가 다른거 보니까.......안될듯?gpt가 쪼금 비스무리하게 해주는거 같긴했는데 내가 원하는 모양이 나오기엔 역부족.. 일단은 요런 슬라이드 모양까지는 만들었다..꾸미기는 나중에 하는걸로.. html의 특정 dom으로 canvas 가져오기 const canvas = document.querySelector('#main-canvas'); con.. 2024. 8. 2. [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. 이전 1 2 다음
