안녕하세요. 해당 강의로 three.js를 처음 접하고 실제 프로젝트에 적용하여 원하는 결과물을 만들 수 있었습니다.좋은 강의 감사합니다.결과물을 발전시키는 도중 원하는 표현이 생겼는데 어떻게 구현하면 좋을지 아이디어를 얻고 싶어 문의를 남깁니다.아래와 비슷하게 특정 지역의 온도를 위치가 정해져 있고 동적으로 색이 바뀌는 기체로 표현하고 싶습니다.three.js의 Fog는 카메라 기준으로 안개가 생기는 방식이라 사용할 수 없을 것 같은데어떤 방식으로 접근하면 좋을까요? 감사합니다.

마지막 강의에서 올리신 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 입체 카드 제작 강의 최종 완성본 파일을 아이폰에서버튼을 클릭하고 확인했을 때 아래의 이미지처럼 에러가 발생을해서 아이폰에서는해당 화면을 확인할 수가 없습니다. 서버에 올려서도 확인 해봤는데 동일합니다.

강의 잘보고 있습니다. 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를 업데이트 해도 변하지가 않습니다. 혹시 해당부분을 해결할 방법이 있나요?

영상을 보면 vscode 에서 자동완성이 되고 계시던데 특별히 설치한 plugin 이 있으실까요??!

setLayout 함수 끝에 들어가는${sceneInfo[i].scrollHeight}px;부분에서 따옴표로 잘못 작성해서 좀 해맸었습니다 ㅎㅎ;${}부분을 풀어 쓰면 정확하게 어떤식으로 표기가 되는건지.. 궁금합니다.제 예상으로는 for문 안에 따로 변수를 선언하지 않고, 계산된 값을 바로 가져오기 위해 사용한 것 같은데 맞을까요..??

일분코딩님처럼 영상이 나오게 하고 싶은데 texture를 비디오로 불러와서 mapping한 것 같은데 어떻게 하신 것인지 궁금합니다. VideoTexture를 사용하신 것일까요?그리고 홈페이지 임베디드 같은 경우에는 어떤 방식을 사용하면 가능한지도 궁금합니다

apply 후 edit mode 에서 전체선택을 했는데, 캡쳐화면처럼 부분 부분 선택이 되고 한번에 전체 선택이 되지 않습니다. 제가 제대로 따라하고 있는 게 맞나요?

<!--오른쪽 네비--> <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를 붙여서 사용된건지 자세하게 알고싶습니다! 

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { height: 500vh; } .sample-video { position: fixed; top: 0; left: 0; width: 100%; } </style> </head> <body> <div class="container"> <!-- <video class="sample-video" src="../video/sample-low.mp4" muted></video> --> <video class="sample-video" src="../video/sample-high.mp4" muted></video> </div> <script> const videoElem = document.querySelector('.sample-video'); let videoDuration; videoElem.addEventListener('loadeddata', function() { console.log('비디오 로드 완료'); videoDuration = videoElem.duration; init(); }) let progress; let currentFrame; function init() { window.addEventListener('scroll', function () { progress = pageYOffset / (document.body.offsetHeight - window.innerHeight); console.log(progress); if (progress < 0) progress = 0; if (progress > 1) progress = 1; requestAnimationFrame(function() { videoElem.currentTime = videoElem.duration * progress; }) }); } </script> </body> </html>복붙해서 사용하세요.

배경을 색 대신에 이미지 넣을 수 있는거죠?

3:30 에 제공해드린 파일이 어디있나요..?최종결과물 파일 외에 또 새로운 파일을 어디에서 받아야하는건가요..?카운트업 js 랑 플러그인 js는 어디서 받아야하는건가요,,?

안녕하세요-!선생님께서 pageYOffset을 사용하셨는데, 그 이유가 IE에서도 호환되기하기 위함이 맞을까요?IE를 고려하지 않는다면 scrollY를 사용하는게 맞는지 궁금합니다. 

안녕하세요 강의 너무 재밌게 잘 수강하고 있습니다.일분이 캐릭터 위에 이것처럼 이름을 띄우고 싶은데 어떤 방식으로 해야할 지 막막해서 여쭤봅니다.

 .bottom 클래스 스타일에background: url(../image/bottom.png) center bottom/100% no-repeat;로 되어있는데 center bottom/100% 부분은 background-position 속성값일까요?bottom/100% 부분이 이해가 안되서 질문 남깁니다.