묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
선생님 Advanced 강의가 절실합니다.
좋은 강의 감사합니다.항상 웹을 만들면서 뭔가 아쉽다 부족하다 생각햇는데 그게 GSAP로 채워지는 것 같습니다.advanced 강의는 언제 나오는지 정보좀 주실 수 없을까요?scrollTrigger와 반응형 강의가 절실합니다.ㅎㅎ가능하다면 React나 Next.JS와 같은 프레임워크 호환 파트도 추가해주실 수 있나요....감사합니다.
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
glb파일 관련
구글에서 다운 받을 수 있는 glb모델들 중 일부는 처음 새로고침시에는 멀쩡히 서있지만, 걸어다니는 애니메이션을 적용시킬 경우 갑자기 캐틱터가 지평선을 바라보지 않고, 땅바닥을 바라보는? 그런 형태로 바뀌는 경우가 많습니다. 혹시 이 부분은 무엇을 고쳐야 하는 걸까요? (다운 받은 파일은 모두 애니메이션 여러가지를 가지고 있는 경우입니다). 한두개가 아니라 한 열개 정도를 받으면 7,8개에서는 이런 현상이 발생합니다.
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
threejs의 최적화를 하려면 어떻게 해야할까요?
각기 다른 geometry를 가진 mesh를 매 분마다 많은 양을 생성할때 웹 브라우저에 out of memory가 발생하는 이슈가 발생하고 있습니다. 이러한 경우에 효과적으로 최적화를 하려면 어떻게 해야할까요? 또한 스택오버플로 나 다른곳을 보면 geometry가 아닌 buffergeometry를 사용하는데 둘의 차이가 무엇인가요?
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
깊게 파려면 어떤 지식들이 더 있을까요?
혹시 본 강의에서 다루고있지 않지만 필수적인 web 3D 지식들이 있다면 뭐가있을까요?최적화에 관한 부분이나 깊게 파고들만한 부분이 더있는지 궁금합니다
-
미해결인터랙티브 웹 개발 제대로 시작하기
아톰 홈페이지가 안나와요.. 서비스 종료됐다는데
오늘 강의 처음듣는데 아톰홈페이지가 안뜹니다 ㅠ 30일 무료 라고 해도 깃허브같은것만뜨는데찾아보니 서비스가 종료됐대요 얼마전에,,vs code로 해도 상관없는건가요?ㄷㄷ ㅠ - 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
페이징.페이지고정2 질문드립니다.
안녕하세요 선생님강의 리소스에는 li가 html에 작성되어있지만저는 자바스크립트를 이용하여 section 갯수에 맞춰서 li도그 갯수에 맞춰서 생성해주고 싶어서 반복문 코드를 짜봤습니다.ex) section 갯수가 8개면 li 갯수도 8개로 자동생성 생성은 되었습니다. 그러나 아직 li의 인덱스를 받아오는 코드를 작성하진 않았어요스크롤을 하였을 시 pageNum 의 i 값이 pageChangeFunc의 함수안에서 remove 혹은 add 가 작동되지 않습니다.(오류가 스크롤 했을 시 뜹니다.)<--- F12에서는 이렇게 뜹니다. --->Uncaught TypeError: Cannot read properties of undefined (reading 'classList') at pageChangeFunc (4.html:120:33) at 4.html:114:17 저는 section 갯수에 맞춰서 li갯수를 생성하려고 appendChild를 사용하였습니다.저의 부족한 지식으로 유추해본 생각이지만 li를 생성하고 난 뒤여서 스크롤이벤트가 안먹혀서 그런건지...아니면 classList 가 작동이 안될까? 라는 생각이 드는데 잘 모르겠네요... 답을 원하지 않습니다만 힌트라도 주시면 감사하겠습니다.<--- 제가 작성한 코드는 이렇습니다. --->var section = document.getElementsByTagName('section'); var pointWrap = document.querySelector('.pointWrap'); var pointBtn = document.querySelectorAll('.pointWrap li'); var pageNum = 0; var totalNum = section.length; for(var s = 0; s < totalNum; s++){ var newli = document.createElement('li') pointWrap.appendChild(newli); } window.addEventListener('scroll', function(event){ var scroll = this.scrollY; for(var i = 0; i < totalNum; i++){ // if(scroll > section[i].offsetTop && // scroll < section[i].offsetTop + section[i].offsetHeight){ if(scroll > section[i].offsetTop - window.outerHeight/3 && scroll < section[i].offsetTop - window.outerHeight/3 + section[i].offsetHeight){ pageNum = i; break; } } pageChangeFunc() }); function pageChangeFunc(){ for(var z = 0; z < totalNum; z++){ section[z].classList.remove("active"); pointBtn[z].classList.remove("active"); } section[pageNum].classList.add("active"); pointBtn[pageNum].classList.add("active"); }
-
미해결BBC 인터랙티브 페이지 "코로나19가 바꿀 사무실의 미래" 클론
오류났을때 참고
안녕하세요 , 23년도에도 듣고 계신 분이 계실지는 모르겠지만.. 강의 들으면서 혹시 막히시는 부분들 제가 수업 들으면서 작성한 코드와 비교해서 본인이 작성한 어떤 부분이 잘못되었는지 확인하시면 문제해결에 도움이 될듯해서요 !birdflies 함수 작성에서 작은 따옴표가 아닌 ` <- 이 부분 (숫자 1 옆의 템플릿 리터럴 ) 활성화 > 비활성화가 되었을 때 다시 돌아오지 않는 부분 이였습니다.위 두가지에서 시간이 좀 잡아먹었는데 저와같은 분들이라면 제 js 랑 비교해보세요 ㅋㅋ( 이 부분은 애니메이션이 완전히 끝까지 완료 후 스크롤을 내려야 다시 활성화 되었을 때 애니메이션이 제자리에서 작동을 하더라구요. )html { font-family: 'Noto Sans KR', sans-serif; } body { margin: 0; } div, section, header, footer, p, h1, h2 { box-sizing: border-box; } a { color: royalblue; } img { max-width: 100%; height: auto; } /* 배경이 되는 이미지들 */ .global-width{ max-width: 620px; margin: 0 auto; padding: 0 1rem; } .scroll-graphic{ overflow-x: hidden; position:sticky; top:0; height: 100vh; } .graphic-item{ display: flex; align-items: center; justify-content: center; position:absolute; left: 0; top:0; width: 100vw; height: 100vh; opacity: 0; transition: 0.5s; will-change: opacity; } .visible{ opacity: 1; } .scene-img{ max-height: 100vh; } .scroll-text{ position: relative; padding-bottom: 1px; } .step{ margin-bottom: 60vh; padding: 0.5rem 1rem; border-radius: 10px; border : 0.2px solid rgba(216,216,216,0.2); box-shadow: rgba(0,0,0,0.3)0 0 3px; background: rgba(255,255,255,0.8); } .bird{ position:absolute; left: 0; bottom:70%; width: 100px; transform:translateX(-100%); transition:1.5s 0.5s linear; } [data-index="5"] .bird{ left: 30%; bottom:30%; } .global-footer{ text-align: center; padding:2rem 0; } .strikethrough{ text-decoration: line-through; }// 전역변수 사용 회피 (() => { const actions = { birdFlies(key){ if (key) { document.querySelector('[data-index="2"] .bird').style.transform = `translateX(${window.innerWidth}px)`; }else{ document.querySelector('[data-index="2"] .bird').style.transform = `translateX(-100%)`; } }, birdFlies2(key) { if (key) { document.querySelector('[data-index="5"] .bird').style.transform = `translate(${window.innerWidth}px, ${-window.innerHeight * 0.7}px)`; }else{ document.querySelector('[data-index="5"] .bird').style.transform = `translateX(-100%)`; } } }; const stepElems = document.querySelectorAll('.step'); const graphicElems = document.querySelectorAll('.graphic-item'); let currentItem = graphicElems[0]; let ioIndex; const io = new IntersectionObserver((entries,observer)=>{ ioIndex = entries[0].target.dataset.index *1 ; console.log(ioIndex); }) for (let i = 0; i < stepElems.length; i++) { io.observe(stepElems[i]); stepElems[i].dataset.index = i; graphicElems[i].dataset.index = i; } function activate(action) { currentItem.classList.add('visible'); if (action) { actions[action](true); } } function inactivate(action) { currentItem.classList.remove('visible'); if (action) { actions[action](false); } } window.addEventListener('scroll', () => { let step; let boundingRect; for (let i=ioIndex-1; i<ioIndex+2; i++){ step = stepElems[i]; if(!step) continue; boundingRect = step.getBoundingClientRect(); if(boundingRect.top > window.innerHeight* 0.1 && boundingRect.top < window.innerHeight*0.8){ inactivate(currentItem.dataset.action); currentItem = graphicElems[step.dataset.index]; activate(currentItem.dataset.action); } } }); window.addEventListener('load',()=>{ setTimeout (() => scrollTo(0,0),100); }) activate(); })();
-
미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
scrollTo 완성본
scrollTo - 페이지 스크롤 부분완성본 자체가 작동이 안되네요크롬브라우저에서 상하 이동 자체가 안되네요 ..복사해서 붙여넣기 해도요왜그런건가요?다음 페이징 스크롤 이동.html 완성본도크롬 브라우저에서 작동 안합니다콘솔 이거맞죠?console.log(scrollTo());이렇게 하면 아래와같이 나옵니다 아래 저와 같은 분이 있어 https://codepen.io/yahao2512/pen/jOmKgGo\여기서 확인해보니 이동은 하나 크롬에서는 behavior: 'smooth', 이게 안되는것 같아요 ~~
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
PointerLockControls 물체 통과 문의드립니다
안녕하세요? 물리엔진과 관련된 내용인 것 같습니다강사님이 만드신 https://studiomeal.com/ 사이트에서는 책장이나 물건을 통과하지 못하게 설정을 되어 있는데, 혹시 물리엔진으로 어떻게 구현하는지 궁금합니다 ㅠ
-
해결됨Three.js로 시작하는 3D 인터랙티브 웹
질문드립니다.
안녕하세요. 해당 강의로 three.js를 처음 접하고 실제 프로젝트에 적용하여 원하는 결과물을 만들 수 있었습니다.좋은 강의 감사합니다.결과물을 발전시키는 도중 원하는 표현이 생겼는데 어떻게 구현하면 좋을지 아이디어를 얻고 싶어 문의를 남깁니다.아래와 비슷하게 특정 지역의 온도를 위치가 정해져 있고 동적으로 색이 바뀌는 기체로 표현하고 싶습니다.three.js의 Fog는 카메라 기준으로 안개가 생기는 방식이라 사용할 수 없을 것 같은데어떤 방식으로 접근하면 좋을까요? 감사합니다.
-
미해결애플 웹사이트 인터랙션 클론!
마지막 강의 js파일로 바꿀 시 스크롤 프레임 렉? 버벅임?
마지막 강의에서 올리신 js파일로 바꾸니 애니메이션이 들어가있는 section 0, 2에서 터치패드로 스크롤 시 멈추는 부분에서 몇프레임 앞뒤 왔다갔다 하는 현상이 좀 심하게 발생합니다. 이전만큼 부드럽게 진행이 되지 않고 좀 간격이 넓게 스크롤 되는 느낌입니다. 이미지 로딩 후 정렬 때문에 이렇게 되는건가요? 아니라면 혹시 팁을 좀 주실 수 있나요?다시 확인해본 바 새로고침을 하면 이러한 문제가 사라지긴 합니다만 원인을 잘 모르겠네요. 좀 더 알아보겠습니다. 제가 진행한 파일입니다!https://leealvinlee.github.io/Leeum_Maurizio_Catellan/
-
미해결인터랙티브 웹 개발 제대로 시작하기
브라우저 사이즈에 따라 위치값이 달라지는건 왜일까요..?
안녕하세요전진 3D스크롤 예제를 이리저리 수정해보고 있는데요.옆면 벽에 더해 위쪽 벽도 만들어보고 싶어서 수정하고 있습니다. 브라우저 사이즈가 작을때는 정상적입니다..근데 브라우저를 최대화하면...이렇게 위쪽 벽이 튀어나가버립니다.. html은 실습예제에서 양쪽벽과 위쪽벽만 빼고 삭제했습니다..<div class="world"> <div class="stage"> <div class="house"> <section class="wall wall-left"></section> <section class="wall wall-right"></section> <section class="wall wall-upper wall-upper-left"></section> <section class="wall wall-upper wall-upper-right"></section> </div> </div></div> css는 body world stage house wall는 실습예제와 크게 다른점이 없구요..body { height: 100vh; font-family: 'Apple SD Gothic Neo', 'Roboto', 'Noto Sans KR', NanumGothic, 'Malgun Gothic', sans-serif; color: #555; background: #555;}.world { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; perspective: 100vw;}.stage { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; transform-style: preserve-3d;}.house { width: 100vw; height: 100vh; transform: translateZ(-500vw); transform-style: preserve-3d;}.wall { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh;} 옆벽과 위쪽벽만 아래처럼 만들어놨습니다...wall-right { background:#6b68ff55; width: 1000vw; transform: rotateY(90deg) translateZ(-400vw)}.wall-upper-left { height: 1000vw; background: #00000055; transform: rotateX(90deg) translateZ(500vw)} 둘다 길이가 1000vw라서 브라우저 가로사이즈에 따라 달라질 요인은 없는거같은데...왜 그럴까요?ㅠㅠ세로로는 브라우저 크기에 영향을 안받고, 오직 가로크기가 변하면 저렇게 어긋나버립니다..
-
미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
수업 파일 부탁드립니다~
안녕하세요수업 자료를 받아볼 수 있을까요?실무편은 자료가 있는데 초급편은 없네요 ㅠㅠdbtkdgml91@gmail.com로 부탁드립니다. 감사합니다.
-
미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
모바일 3D 입체 카드 제작 아이폰에서 에러
안녕하세요.모바일 3D 입체 카드 제작 강의 최종 완성본 파일을 아이폰에서버튼을 클릭하고 확인했을 때 아래의 이미지처럼 에러가 발생을해서 아이폰에서는해당 화면을 확인할 수가 없습니다. 서버에 올려서도 확인 해봤는데 동일합니다.
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
저번에 이어 질문드립니다.
강의 잘보고 있습니다. ThreeJS 관련해서는 이강좌 만한게 없네요^^ 저번에 ThreeJS를 이용한 그래프만들기를 문의 했습니다. https://www.inflearn.com/questions/499689/%EA%B0%95%EC%9D%98-%EB%84%88%EB%AC%B4-%EC%9E%98%EB%93%A3%EA%B3%A0-%EC%9E%88%EC%8A%B5%EB%8B%88%EB%8B%A4-%EC%A7%88%EB%AC%B8-%EB%93%9C%EB%A6%BD%EB%8B%88%EB%8B%A4 제가 구성해야할 Bar가 256*60개여서 해당부분으로 해보니 프레임이 너무 안나와서 geometry를 합쳐서 하나의 mesh로 구성해 보았습니다. let geometrys = []; class Bar { constructor(info = {}) { this.container = info.container; this.value = info.value || 0; const heightValue = (this.value / maxValue) * maxBarHeight; this.x = info.x || 0; this.y = heightValue / 2; this.z = info.z || 0; const geometry = new THREE.BoxGeometry(1, 1, 1); originHelper.position.set(this.x, this.y, this.z); originHelper.scale.set(1, heightValue, 4); originHelper.updateMatrixWorld(true, false); geometry.applyMatrix4(originHelper.matrixWorld); geometrys.push(geometry); } } for (let i = 0; i < 256 * 60; i++) { const value = Math.random() * 255; new Bar({ value, x: (i % 255) * barDistance + 1, y: 0, z: parseInt(i / 256) * 4, }); } // 생성한 geometry를 전부 합침 let mergedGeometry = mergeBufferGeometries(geometrys, false); let mesh = new THREE.Mesh(mergedGeometry, basicMaterial); scene.add(mesh); // 그리기 const clock = new THREE.Clock(); function draw() { /////////////////////////////////////// for (let i = 0; i < 256 * 60; i++) { const value = Math.random() * 255; const heightValue = (value / maxValue) * maxBarHeight; const y = heightValue / 2; originHelper.position.set( (i % 255) * barDistance + 1, y, parseInt(i / 256) * 4 ); originHelper.scale.set(1, heightValue, 4); originHelper.updateMatrixWorld(true, false); geometrys[i].applyMatrix4(originHelper.matrixWorld); } renderer.render(scene, camera); renderer.setAnimationLoop(draw); // requestAnimationFrame(draw); }이렇게 구성해보고 프레임마다 난수를 발생해서 그래프가 갱신하게 구성하고 싶은데 mesh와 다르게 geometry의 matrix를 업데이트 해도 변하지가 않습니다. 혹시 해당부분을 해결할 방법이 있나요?
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
자동완성
영상을 보면 vscode 에서 자동완성이 되고 계시던데 특별히 설치한 plugin 이 있으실까요??!
-
미해결애플 웹사이트 인터랙션 클론!
선생님 이해가 잘 안가는 문구가 있어서 질문 드립니다.
setLayout 함수 끝에 들어가는${sceneInfo[i].scrollHeight}px;부분에서 따옴표로 잘못 작성해서 좀 해맸었습니다 ㅎㅎ;${}부분을 풀어 쓰면 정확하게 어떤식으로 표기가 되는건지.. 궁금합니다.제 예상으로는 for문 안에 따로 변수를 선언하지 않고, 계산된 값을 바로 가져오기 위해 사용한 것 같은데 맞을까요..??
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
질문 있습니다
일분코딩님처럼 영상이 나오게 하고 싶은데 texture를 비디오로 불러와서 mapping한 것 같은데 어떻게 하신 것인지 궁금합니다. VideoTexture를 사용하신 것일까요?그리고 홈페이지 임베디드 같은 경우에는 어떤 방식을 사용하면 가능한지도 궁금합니다
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
apply 후 전체선택
apply 후 edit mode 에서 전체선택을 했는데, 캡쳐화면처럼 부분 부분 선택이 되고 한번에 전체 선택이 되지 않습니다. 제가 제대로 따라하고 있는 게 맞나요?
-
미해결실전! 웹사이트제작! Step By Step! ('포메인'_풀페이지사이트 제작)
right nav에 active 질문입니다
<!--오른쪽 네비--> <ul class="rightNav" id="rightNav"> <li data-menuanchor="firstPage" class="active"><a href="#firstPage"><span>홈</span></a></li> <li data-menuanchor="secondPage"><a href="#secondPage"><span>브랜드</span></a></li> <li data-menuanchor="thirdPage"><a href="#thirdPage"><span>메뉴</span></a></li> <li data-menuanchor="fourthPage"><a href="#fourthPage"><span>서비스</span></a></li> <li data-menuanchor="fifthPage"><a href="#fifthPage"><span>사회공헌</span></a></li> <li data-menuanchor="sixthPage"><a href="#sixthPage"><span>SNS</span></a></li> <li data-menuanchor="seventhPage"><a href="#seventhPage"><span>커뮤니티</span></a></li> </ul>css/* rightNav motion*/ .fullPageWrap .rightNav li.active a span{opacity: 1;right: 30px; transition: all 0.5s ease-in-out;} .fullPageWrap .rightNav li.active a:after{right:-2px; width: 12px; height: 12px; border: 2px solid #96cc29; border-radius: 12px; background: rgba(255,255,255,0);box-sizing: border-box;margin-top: -6px;} html에 active가 첫 firstpage에만 붙어있는데 어떻게 다른 secondpage,thirdpage... 에도 적용이 되는지 궁금합니다! fullpage.js 에 붙어있는 기능인지 , 아니면 :active를 붙여서 사용된건지 자세하게 알고싶습니다!