Mesh에 rgb값이 적용되지 않는 것 같습니다..!새로고침이나 서버 다시 시작 등은 해봤습니다,,혹시 한 번 봐주실 수 있을까요?ㅠㅠ// Mesh const geometry = new THREE.BoxGeometry(1,1,1); let mesh; let material; for( let i=0;i<20;i++){ material = new THREE.MeshStandardMaterial({ color: `rgb( ${ 50 + Math.floor(Math.random() * 205) }, //r값 // Math.floor()은 내림 함수 ${ 50 + Math.floor(Math.random() * 205) }, //g값 ${ 50 + Math.floor(Math.random() * 205) } //b값 )` }); mesh = new THREE.Mesh(geometry,material); mesh.position.x = (Math.random()-0.5)*5;//-2.5에서 2.5 사이의 범위 mesh.position.y = (Math.random()-0.5)*5; mesh.position.z = (Math.random()-0.5)*5; scene.add(mesh); }

섹션2 번째 내용입니다.해당과정을 리액트에서 적용하면서 따라가고 있습니다. 돔접근에 대해서는 useRef를 사용해서 잘 따라가고 있는데, scrollSection1 의 부분에서 scrollSection1Msg1~scrollSection1Msg4 의 opacity 부분에서 아래와 같이 작업했습니다. 그런데 화면에 잔상이 남습니다. 완전히 opacity=0 가 되지 않는 것처럼 희미하게 글자들이 중첩되며 남아 있습니다. (맥북 M1) values : { selectionMsgA_opacity : [0 ,1, {start: 0.1, end:0.2}], selectionMsgA_opacity_out : [1 ,0, {start: 0.25, end:0.3}], else if (scrollRatio <= 0.3) { obj.Section1Msg1.current.style.opacity = calcValues(values.selectionMsgA_opacity_out, currentYoffset) obj.Section1Msg1.current.style.transform = `translateY(${ calcValues(values.selectionMsgA_translateY_out, currentYoffset)}%)`

jquery 일때 아래코드로 잘나옴$(function(){ $(window).on('load scroll', function(){ const header = $('.header'); header.addClass('load'); //로드되자마자 나와야된다. }) }) 나름 바닐라자바스크립트로 변환해보려고 하는대 상단 네비가 안나오네요 모가문제일까요 ㅠㅠwindow.onload = function(){ const element = document.getElementsByClassName('header'); element.classList.add('load'); }

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

혹시 스크립트부분을 제이쿼리 대신 바닐라자바스크립트로 대체된 문서나 강의를 추가해주실순 없을까요 ^^; 아무래도 리액트도 공부하다보니, ㅎㅎ

ㅡ

GUI컨트롤 강의에서 8:05에 lookAt(mesh.position)을 했는데 왜 lookAt(mesh)를 하면 화면에 아무것도 안 보이는건가요??+애니메이션이 계속 업데이트 되기 때문에 camera.lookAt(mesh.position)을 draw()함수에 넣어야된다고 하셔서 애니메이션을 끄고 실행해보려고 draw()함수를 주석처리하고 camera.lookAt(mesh.position)을 다음과 같이 넣었더니 GUI를 움직여도 변화가 없는데 이건 왜인가요??ㅠㅠ // GUI const gui = new dat.GUI(); gui.add(mesh.position, 'y', -5, 5, 0.01).name('y 위치'); //조정할 속성, 속성값, 최솟값, 최댓값, 조정 단위 gui .add(mesh.position, 'z') .min(-10) .max(3) .step(0.01) //위와 같은데 쓰는 방식만 다른거임 .name('메쉬의 z위치'); //조정 이름 설정 gui.add(camera.position, 'x', -10, 10, 0.01).name('카메라 x'); camera.lookAt(mesh.position); // 그리기 const clock = new THREE.Clock(); // function draw() { // const time = clock.getElapsedTime(); // mesh.rotation.y = time; renderer.render(scene, camera); // renderer.setAnimationLoop(draw); // }

- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 원래 위처럼 document.querySelector("#scroll-section-0 .main-message.a"),.main-message.a 와 같이 클래스는 붙여서 작성해야하나요? 띄워서 작성하니까 안찾아지던데아이디와 클래스는 다른 속성이라서 띄워주고, 클래스끼리는 붙여서 작성해야하는 건가요아니면main-message클래스랑 a클래스는 형제클래스니까 부모 자식의 관계를 뜻할 때만 띄워주는 건가요?

웹 제작 에디터(아임웹)에서 해당 기능을 사용하려고 합니다. 수업에서는 파일을 불러오는데.. 웹 에디터에서는 그런 기능을 지원하지 않아 전체를 복사해서 붙여 넣었는데 오류가 발생합니다.외부 기능을 쓰는 web-animations 기능은 cdn으로 적용이 잘 되었습니다.혹시 scroll-timeline.js 내용도 cdn으로 불러올 수 있는 방법이 있을까요??검색해도 찾을 수가 없어 문의드립니다. ^^a

넓이를 높이를 전부 고정값으로만 사용하게 되는데 혹시 해당 부분은 100% 로 채워서는 적용이 어려울까요?모바일까지 고려하게되면 퍼센트로 작업해야할것같은데 뭔가 넓이값이 달라지게 되면 중간중간 요소들 컨트롤이 아에 어려운 구조가 될까요?

수강중인데 리뉴얼 되고 굉장히 깔끔해진 것 같은 느낌 받습니다!혹시 포트폴리오 페이지는 AWS로 운영 중 이신걸까요?아니라면 어떤걸로 하고 계신지 궁금합니다!

TextureLoader를 사용하는게 맞는 방법인지는 모르겠는데 TextureLoader로 사진을 로딩하여 모델의 특정 영역에만 사진을 표시 할려면 어떤 방법을 사용해야 하는지 궁금 하여 문의 드립니다.해야 되는 작업은 상품 상세 페이지에서 사용자가 업로드한 이미지를 컵, 텀블러, 우산 이런 모델 데이타를 로딩하고 거기에 특정 영역에만 사용자가 업로드한 이미지를 보여주고 주문 전에 미리보기 할수 있는 페이지를 만들어야 하는작업인데.. 특정 영역에만 사진을 넣기 위해서 모델 디자인 하는 업체에 어떻게 만들어 달라고 요청을 해야 하는지도 궁금 하고 TextureLoader로 로딩해서 만드는 지도 궁금합니다.강의 구매전에 스크롤 해서 캔 위치 이동하는 강의를 보고 캔에 사진 넣는 강의라고 생각해서 보고 힌트를 얻을수 있을까 했는데.. 아니였네요....

 vs코드에서 코드를 치면서 보는중인데 새로고침하면 첫번째 요소가 이미 위로 올라간상태로 시작되어서 어색한데 이 부분은 어떻게 해결 가능할까요? duration을 좀 줘보고 해봐도 첫번째 박스는 위로 좀 올라간상태에서 시작하네요 delay: 0.6 정도주면 대충 맞긴한대 delay 주는 방법밖에는 없겠죠? gsap.to(".stage .box", { y: -50, stagger: 0.2, });

 https://productive-printer-b81.notion.site/GSAP-Basic-4c37387fe8254db4a7d14c883f8baa2d노션 주소가 이거 맞나요? 환경설정 파트 > 수업 자료 라고 되어 있는 거 클릭하면 이런 주소가 나옵니다. ..제대로 된 주소 찾느라고 다섯개 강의를 다 다시 봤는데... 흠...진도를 나갈 수가 없어요. ㅠ.ㅠ확인부탁드립니다.

- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. hair.glb, body.glb 두 개의 모델은 동일한 bone 구조를 가지고 있습니다.body.glb 모델에 hair.glb의 머리 모양을 결정하는 skinnedMesh 를 가져와 넣어 주었는데요hair.glb 모델을 단독으로 import 해서 띄웠을 때와 다른 크기와 위치에 skinnedMesh가 적용되어 나타납니다.이렇게 머리에 헤어 스타일이 적용된게 기대값이었는데요hair.glb 파일을 단독 import하면 body.glb에 맞는 위치, 크기로 import 되지만위에 기재한 대로 skinnedMesh를 가져오면이렇게 보여집니다. 뒤에 하얗게 보이는게 hair.glb의 skinnedMesh 입니다.기대값으로 원하는 모델과 같은 위치에 skinnedMesh를 넣었으나 적용이 되지 않는데 어떻게 해야할까요??

혹시 강의내용과 같은 페이지를 쉽게 만드는 라이브러리 같은게 있을까요? 저런 스크롤 애니메이션 페이지를 만들 때 바닐라 자바스크립트가 아닌 더 쉽게 만들 수 있게 해주는게 혹시 있나 궁금합니다

코드로보시면 간단합니다.왠만한건 다돌아가기 때문에 해석할 필요는 없으실겁니다.테일윈드backgroundImage 를 단축어로설정하여 bg-sky2 를사용하면 사진이 불러와집니다. 모든것이 정상 작동잘됍니다. 아래는 제가 작성한 코드중 일부분입니다. <div className={`${ scrollPercent >= 25 && scrollPercent < 50 ? "opacity-100 " : "opacity-0 " } block absolute h-full bg-sky2 transition-opacity duration-500`} ></div>이때 absolute 를 사용하였을떄 bg-sky2 이미지가 안보이게됍니다.일부분 버그인줄 알았습니다. 그래서 다른 백그라운드 색상을 바꾸어보았습니다.bg-sky2 ==>(교체) bg-red-400 동일하게 안보입니다.하지만absolute 를 사용하지 않으면 4개가 스택처럼 쌓이지만 정상적이게 원하는퍼 센테이지에 올떄 없어지고 생성됍니다.고민중이미지로 만들었는데 정상작동 하였습니다.하지만 저는backgroundImage 로넣는것이 필터다 backgroundFixed 등 여러가지 활용이 된다고 생각하여 질문드립니다.  <img className={`${ scrollPercent >= 75 && scrollPercent < 102 ? "opacity-100 " : "opacity-0 " }block absolute h-full transition-opacity duration-500`} src="/images2/motion_sky4.gif" alt="motion_moon" /> 요약absolute을 사용하면 다돌아가던것이 왜인지 안돌아갑니다.개발환경은 next.js tailwind 입니다.(취업못하고 공부용입니다.) 전체코드는 다음과같습니다"use client"; import React, { useRef, useEffect, useState } from "react"; import motion_sky1 from "@/../../public/images2/motion_sky1.gif"; function Page() { const [scrollPercent, setScrollPercent] = useState(0); const scrollBody = useRef(null); console.log(scrollPercent); useEffect(() => { const handleScroll = () => { const scrollRealHeight = document.documentElement.scrollHeight - window.innerHeight; const scrollTop = window.scrollY; const percentScroll = Math.round((scrollTop / scrollRealHeight) * 100); setScrollPercent(percentScroll); }; window.addEventListener("scroll", handleScroll); return () => { window.removeEventListener("scroll", handleScroll); }; }, []); return ( <div ref={scrollBody} className="relative left-0 top-0 h-6000 w-full "> <div>내용</div> {/* <img className={`${ scrollPercent < 25 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-black transition-opacity duration-500 `} src="/images2/motion_sky1.gif" alt="motion_moon" /> <img className={`${ scrollPercent >= 25 && scrollPercent < 50 ? "opacity-100 " : "opacity-0 " } block absolute h-full bg-teal-500 transition-opacity duration-500`} src="/images2/motion_sky2.gif" alt="motion_moon" /> <img className={`${ scrollPercent >= 50 && scrollPercent < 75 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-red-400 transition-opacity duration-500`} src="/images2/motion_sky3.gif" alt="motion_moon" /> <img className={`${ scrollPercent >= 75 && scrollPercent < 102 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-blue-500 transition-opacity duration-500`} src="/images2/motion_sky4.gif" alt="motion_moon" /> */} <div className={`${ scrollPercent < 25 ? "opacity-100 " : "opacity-0 " }block absolute Fixed z-50 h-full bg-sky1 transition-opacity duration-500 `} ></div> <div className={`${ scrollPercent >= 25 && scrollPercent < 50 ? "opacity-100 " : "opacity-0 " } block absolute h-full bg-sky2 transition-opacity duration-500`} ></div> <div className={`${ scrollPercent >= 50 && scrollPercent < 75 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-red-400 transition-opacity duration-500`} ></div> <div className={`${ scrollPercent >= 75 && scrollPercent < 102 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-blue-500 transition-opacity duration-500`} ></div> <div className="motion_ggang"> <figure className="ch_body"> {/* 몸 */} <img className="fixed h-40 w-32 top-12 left-7" src="/images2/motion_body2.png" alt="motion_body2" /> </figure> {/* 손 */} <figure className="ch_hand_right"> <img className="fixed h-40 w-32 top-12 left-7" src="/images2/motion_hand_right.png" alt="motion_hand_right" /> </figure> </div> {/* 달 */} <figure className="motion_moon"> <img className="fixed h-40 w-32 top-12 right-3" src="/images2/motion_moon.png" alt="motion_moon" /> </figure> </div> ); } export default Page;  

안녕하세요 강의를 듣고 직접 작성하면서 적용을 해보려고 하다가 강의에서 사용하는 scroll-timeline polyfill repo 에서 찾아보니 강의에서 사용했던 scrollOfsets을 앞으로는 사용하지 않는 것 같았습니다. 이러한 부분에 대해서 다른 해결법이 또 있을까요? 아래의 링크에 방법이 있긴 합니다만 조금 더 효율적인 방법이 있는지 궁금했습니다! 추가로 react에서도 사용하려고 했지만 Npm에서는 관련한 패키지가 없는 것 같아서 혹시 react에서 적용해보신 적이 있으실까요?!https://github.com/flackr/scroll-timeline/issues/64

이번에 강의에 추가된 closest를 사용하면 다음과 같이 사용하면 될까요? 동작은 정상적으로 작동합니다 const stage = document.querySelector(".stage"); stage.addEventListener("click", e => { e.target.closest(".door").classList.toggle("door-open"); });

1년동안 쇼핑몰 인하우스 간단한 퍼블 업무하다가 이직 준비하면서 공부중인데 궁금한점이있어서요 스크롤 애니메이션할때 간단한 효과는 aos, 디테일한건 gsap을 많이 쓴다고 들었거든요 이 강의의 web api 애니메이션을 습득하면 실무에서 gsap 으로 할수있는건 대부분 할 수 있는건가요? 물론 완전히 대체는 안되겠지만 왠만한건 가능한건가요 제가 gsap도 아직 공부할 예정이라 자세히 몰라서 질문드립니다ㅎ