강사님! 함수를 생성자 함수로서 실행을 하고 생성자 함수의 this에 개별 객체를 바인딩 하기 위해서 new 키워드를 쓰는것으로 이해를 했는데 제가 이해한게 맞나요?

3개의문 2 강의 중에서 일분이 이미지를 가릴 때 transition을 사용하셔서 처음 위치에서 오른쪽으로 100% 이동을 시키셨잖아요?그 때 처음 두개의 문에 있던 일분이는 문 뒤에 가혀 보이지 않게 되었는데 세번째 문에 있던 일분이는 <div class = 'stage'> </div> 위에 보였습니다.그렇다면 처음 두개 문에 있던 일분이는 이동한 후에 레이어 상에서 이웃한 문 뒤에 위치해서 보이지 않는건가요?

저는 어떤 이미지를 넣을 때 바로 img 태그를 이용해 넣을거같은데 강사님은 항상 div 태그 안에 background-img를 넣으시더라구요 혹시 그렇게 하시는 이유가 따로 있으신가요? 궁금합니닷!

Raycater강의를 듣다(특정 광선을 지나가는 메쉬 감지하기)direction벡터의 값을 (0,0,-100)에서 (0,0,-1)로 설정하라고 말씀해주셨는데요,혹시 길이가 1이 아닐 경우에 제대로 작동하지 않는 이유가 무엇인가요?

코드가 미리보기로 보여주는 확장프로그램이 뭔가요?

춘식이 강의를 듣고있는중인데모니터 주사율 때문에 속도가 빨라진 것 같습니다.이전 강의에서 cannon을 사용할 땐 cannonWorld.step을 수정해서 속도를 맞췄는데춘식이 예제는 cannon을 사용하지 않는 것 같아서 질문드립니다! 

제목 그대로 입니다 웹팩 콘피그의 엔트리에도 잘들어가 있고 파일 명을 바꾸면 에러를 뱉는것이 잘 연결되어있는 것 같은데, 콘솔을 찍으면 나오지 않습니다.html에 스크립트를 넣어주면 문제없이 콘솔 찍어 냅니다혹시 예상되는 문제점이 있을까요?

안녕하세요 좋은 강의 잘 참고해서 재밌게 만들어보고있습니다. ^^requestanimationframe을 사용해서 애니메이션이 부드럽게 잘 이동합니다만애니메이션 종료를 따로 설정해주지 않으면 renderGame()은 무한히 반복될텐데 성능에 문제가 없을까요?bulletComProp.arr와 allMonsterComProp.arr의 경우 충돌하거나 사라질때 배열에서 삭제하기때문에 순회할게 없어 동작이 안된다고하더라도 hero.keyMotion 혹은 setGameBackground는 console로 찍어보니 값이 무한히 반복해서 성능에 문제가 되지 않을까 고민해보게 되네요답변주시면 감사하겠습니다정말 감사합니다.

안녕하세요 선생님 ~ 수업 잘 듣고있습니다!외부에서 gltf파일이나 glb파일을 불러와서 모델 주위에 충돌 상자를 만들어서 적용하려고 하는데요.외부에서 불러온 모델들의 너비나 높이, 깊이가 각각 제각각이라 gltf의 정확한 너비, 높이, 깊이값을 알고싶습니다 ㅠㅠ치수를 얻기 위해 어떻게 해야 될까요?

강의에서는 animations가 하나만 포함된 예제만 알려주셨는데, mixamo나 다른 방법으로 여러개를 가져오는 방법은 없는건가요?

여기서 와일문을 돌리면 점점 큰 범위로 menu-btn이라는 클래스가 있는지 찾아가는 게 되는건가요?예를 들어 버튼안에 버튼, 그안에 버튼이렇게 있다면 내가 제일 안쪽에 있는 버튼을 클릭했을 때에, 제일 안쪽의 버튼, 중간버튼, 제일 겉에 있는 버튼 이런 순서로 찾아가게 되는 건지가 궁금합니다 영상 너무 잘보고 있습니다 ㅠ 좋은 강의 감사해요!!

좋은 강의 감사합니다.항상 웹을 만들면서 뭔가 아쉽다 부족하다 생각햇는데 그게 GSAP로 채워지는 것 같습니다.advanced 강의는 언제 나오는지 정보좀 주실 수 없을까요?scrollTrigger와 반응형 강의가 절실합니다.ㅎㅎ가능하다면 React나 Next.JS와 같은 프레임워크 호환 파트도 추가해주실 수 있나요....감사합니다.

구글에서 다운 받을 수 있는 glb모델들 중 일부는 처음 새로고침시에는 멀쩡히 서있지만, 걸어다니는 애니메이션을 적용시킬 경우 갑자기 캐틱터가 지평선을 바라보지 않고, 땅바닥을 바라보는? 그런 형태로 바뀌는 경우가 많습니다. 혹시 이 부분은 무엇을 고쳐야 하는 걸까요? (다운 받은 파일은 모두 애니메이션 여러가지를 가지고 있는 경우입니다). 한두개가 아니라 한 열개 정도를 받으면 7,8개에서는 이런 현상이 발생합니다. 

각기 다른 geometry를 가진 mesh를 매 분마다 많은 양을 생성할때 웹 브라우저에 out of memory가 발생하는 이슈가 발생하고 있습니다. 이러한 경우에 효과적으로 최적화를 하려면 어떻게 해야할까요? 또한 스택오버플로 나 다른곳을 보면 geometry가 아닌 buffergeometry를 사용하는데 둘의 차이가 무엇인가요?

혹시 본 강의에서 다루고있지 않지만 필수적인 web 3D 지식들이 있다면 뭐가있을까요?최적화에 관한 부분이나 깊게 파고들만한 부분이 더있는지 궁금합니다

오늘 강의 처음듣는데 아톰홈페이지가 안뜹니다 ㅠ 30일 무료 라고 해도 깃허브같은것만뜨는데찾아보니 서비스가 종료됐대요 얼마전에,,vs code로 해도 상관없는건가요?ㄷㄷ ㅠ - 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

 안녕하세요 선생님강의 리소스에는 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"); }

안녕하세요 , 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 - 페이지 스크롤 부분완성본 자체가 작동이 안되네요크롬브라우저에서 상하 이동 자체가 안되네요 ..복사해서 붙여넣기 해도요왜그런건가요?다음 페이징 스크롤 이동.html 완성본도크롬 브라우저에서 작동 안합니다콘솔 이거맞죠?console.log(scrollTo());이렇게 하면 아래와같이 나옵니다 아래 저와 같은 분이 있어 https://codepen.io/yahao2512/pen/jOmKgGo\여기서 확인해보니 이동은 하나 크롬에서는 behavior: 'smooth', 이게 안되는것 같아요 ~~

안녕하세요?  물리엔진과 관련된 내용인 것 같습니다강사님이 만드신 https://studiomeal.com/ 사이트에서는 책장이나 물건을 통과하지 못하게 설정을 되어 있는데, 혹시 물리엔진으로 어떻게 구현하는지 궁금합니다 ㅠ