const shoesClick = () => { const intersects = raycaster.intersectObjects( gltf.scene.children, true ); };강의에서는 위와 같이 raycaster.intersectObject 메서드 호출시에 scene에 children을 넘겨주시는데 클릭 이벤트의 eventObject 를 넘겨주지 않았는데도 raycaster에 마우스 방향을 set 가능한가요?

 안녕하세요.강의를 통해 gsap을 입문한 학생입니다. 현재 강의는 스크롤 시 실선이 나타나는데점선으로 나타내고 싶습니다.현재 강의에서의 설정부분인데 pathLength = document.querySelector(element).getTotalLength(); gsap.set(element,{ strokeDasharray:pathLength, strokeDashoffset:pathLength, })strokeDasharray 설정 부분에 dashArray 간격이 16을 넣었더니 이미 실선이 그려진채로 나오더라구요.드래그하면서 실선이 그려져야하는데...실선이 아닌 점선으로도 구현할 수 있는지 궁금합니다 

완성된 부분까지 코드를 메일로 첨부하였어요.javascript부분에서 scrollPos가 동작하지 않는 거 같아요~ 

(() => { const leaflet = document.querySelector('.leaflet'); const pagesElem = document.querySelector('.page'); let pageCount = 0; function getTarget(target,className) { while (!target.classList.contains(className)) { target = target.parentNode; if (target.nodeName === 'BODY') { return; } } return target; } leaflet.addEventListener('click', (e) => { let pageElem = getTarget(e.target, 'page'); pageElem.classList.add('page-flipped'); pageCount++; if (pageCount === 2) { document.body.classList.add('leaflet-opened'); } let closeElem = getTarget(e.target, 'close-btn'); if (closeElem) { console.log(pagesElem); closeElem.classList.remove('leaflet-opened'); pageElem.classList.remove('page-flipped'); pageCount = 0; } }); })(); page 첫번째를 선택을 해줘도 close 버튼을 클릭했을때 3번째 페이지의 page-flipped가 제거 되면서 세번째 페이지가 접어 지는데 이유가 뭔가요?

안녕하세요 현재 강의에서 let x = 0; let y = 0; let targetX = 0; let targetY = 0; let speed = 0.03;이 부분과x = e.pageX; y = e.pageY;이 부분 그리고targetX += (x - targetX) * speed; targetY += (y - targetY) * speed;이 부분이 왜 작성이 된 것인지 이해가 잘 되지 않습니다.

눈을 하나씩 그리고 싶은데 그릴 때 마다 미러모드가 작동하는 것 처럼 그려져요

안녕하세요! 1~3 파트 까지 완강했고..다른 강의자보다 범쌤 강의가 저에게 너무 잘 맞아서..범쌤 다음 강의만 기다리고 있습니다 ㅠ ㅅ ㅠ 다음 강의 오픈 일정 예정이 언제쯤 일까요?! ㅠ

init() { window.addEventListener('scroll', () => { this.scrollRunHandler(); this.scrollPosition(this.mainElem); }); } scrollRunHandler() { clearTimeout(this.scrollState); if (!this.scrollState) { this.mainElem.classList.add('running'); } this.scrollState = setTimeout(() => { this.scrollState = false; this.mainElem.classList.remove('running'); }, 500); } scrollPosition = (elem) => { if (elem.lastScrollTop > window.scrollY) { // 스크롤을 아래로 this.mainElem.dataset.direction = 'backward'; } else { // 스크롤 위로 this.mainElem.dataset.direction = 'forward'; } elem.lastScrollTop = window.scrollY; } 생성자 함수를 클래스 함수로 변경하면서 this가 character를 가리켜야 되는데 window를 가리키는 문제가 생겨서 변수를 그냥 넣어줘서 작동은 하는데 이렇게 하는게 맞는지 궁금합니다.

DragControls 1:05초에 인자를 바꾸지 않으면 에러가 나야하는데, 저는 에러가 안뜨는데 이유가 뭘까요??서버도 껐다가 다시 켜도 동작만 안될 뿐이고, 에러는 안납니다!import * as THREE from 'three'; import { DragControls } from 'three/examples/jsm/Addons.js'; // ----- 주제: PointerLockControls 클릭 시 마우스 커서 사라지고, 마인크래프트 스타일로 변경됨 export default function example() { // Renderer const canvas = document.querySelector('#three-canvas'); const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1); // Scene const scene = new THREE.Scene(); // Camera const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.y = 1.5; camera.position.z = 4; scene.add(camera); // Light const ambientLight = new THREE.AmbientLight('white', 0.5); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight('white', 1); directionalLight.position.x = 1; directionalLight.position.z = 2; scene.add(directionalLight); // Controls const controls = new DragControls(camera, renderer.domElement); // Mesh const geometry = new THREE.BoxGeometry(1, 1, 1); let mesh; let material; for (let i = 0; i < 20; i++) { material = new THREE.MeshStandardMaterial({ // rgb (0,0,0)~(255,255,255) => (0,0,0)인 경우 검은색에 가까워지므로 최소:50 최대:250-50 color: `rgb( ${50 + Math.floor(Math.random() * 205)}, ${50 + Math.floor(Math.random() * 205)}, ${50 + Math.floor(Math.random() * 205)} )`, }); mesh = new THREE.Mesh(geometry, material); mesh.position.x = (Math.random() - 0.5) * 5; mesh.position.y = (Math.random() - 0.5) * 5; mesh.position.z = (Math.random() - 0.5) * 5; scene.add(mesh); } // 그리기 const clock = new THREE.Clock(); function draw() { const delta = clock.getDelta(); renderer.render(scene, camera); renderer.setAnimationLoop(draw); } function setSize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.render(scene, camera); } // 이벤트 window.addEventListener('resize', setSize); draw(); }

{ "files": [], "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" } ], "compilerOptions": { "baseUrl": ".", "paths": { "@components/*": ["src/components/*"] } }, "types": ["node"] }import { Canvas } from "@react-three/fiber"; import { OrbitControls } from "@react-three/drei"; import ShowRoom from "@components/three/ShowRoom"; export default function Home() { return ( <> <Canvas> <axesHelper args={[5]} /> <gridHelper /> <OrbitControls /> <directionalLight position={[3, 3, 3]} /> <ShowRoom /> </Canvas> </> ); }//vite.config.ts import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import path from "path"; // https://vite.dev/config/ export default defineConfig({ plugins: [react()], resolve: { alias: [ { find: "@src", replacement: path.resolve(__dirname, "src"), }, { find: "@components", replacement: path.resolve(__dirname, "src/components"), }, ], }, });vite config, tsconfig.json을 바꿨는데 home.tsx에서 import ShowRoom from "@components/three/ShowRoom"; 불러오는데 Cannot find module '@components/three/ShowRoom' or its corresponding type declarations.ts(2307)못찾는다는 에러가 생깁니다뭐를 잘못했는지 모르겠습니다ㅠㅠㅠ

우선 원인은...MeshObject 클래스 속성 중 differenceY 의 값에 OR 연산자를 사용., main.js 에서 ground 변수에 '0' 문자열 값을 할당해서 그런데요.ground 는 y 속성값을 할당하지 않았기 때문에 MeshObject 클래스에서 info.y 는 undefined 이고, this.y 는 "this.height / 2 + this.differenceY" 의 계산이 적용되서 " 0.1 / 2 + '0' " 즉, 문자열 '0.20' 이 출력됩니다.산술 연산자 '+' 가 들어가게되면, 그 계산식의 결과값은 반드시 문자열이 나옵니다.x, y, z, differenceY 는 모두 좌표와 연관된 값으로, 모두 숫자 데이터 타입을 할당받아야 하는 일관성이 필요한데 ground, floor 에서만 differenceY 가 문자열을 받아 발생한 이슈입니다.강의를 들어보던 중 강사님께서 처음에 숫자 0 을 사용하셨고, this.differenceY 속성에 값을 할당할때 OR 연산자를 쓰심으로인해 숫자 0 이 null/undefined 로 인식되는 것 때문에 문자열로 바꾸신거 같더라구요.조금 더 정확하게 하자면, OR 연산자가 아닌 ?? 연산자를 사용해 숫자 0을 값 그대로 사용할 수 있도록 바꾸고 ground 에도 문자열 '0' 이 아닌 숫자 0 을 넣어주면 될것같습니다.x, y, z 에 곱하기 1을 하는 추가코드는 필요없어집니다. 

스크롤이 처음과 끝이 아닌 중간 위치에 있을 때 창의 크기를 변환하면 스크롤 비율이 달라져서 그런지 화면이 z축을 기점으로 순간이동을 합니다. 이것을 부드럽게 하기 위해서는 어떠한 방법이 있을까요?

const end = document.querySelector(".last").getBoundingClientRect().left; 위 코드와 같이 요소의 특정 값을 사용하여 gsap 애니메이션을 사용할 경우 resize 이벤트 시 정상적으로 동작하는 케이스가 종종 있는데리사이즈 이벤트가 발생할 때마다 addEventListener를 통해 gsap 애니메이션 코드를 모두 다시 호출하여 값을 재할당하는 방법밖에 없을까요? 리사이징에 대비하여 애니메이션 값을 동적으로 업데이트할 수 있는 더 효율적인 방법이나 권장되는 접근 방식이 있는지 질문드립니다.

window를 ballElem로 변경하면 click했을때 작동을 하지 않는데 이유를 모르겠습니다..!<script> const ballElem=document.querySelector('.ball'); window.addEventListener('click', function(){ ballElem.style.animation='ball-ani 1s 3 forwards'; }); ballElem.addEventListener('animationend',function(){ ballElem.classList.add('end'); }); ballElem.addEventListener('animationiteration',function(){ console.log('반복'); }); </script>

강의를 듣기 시작했는데 강의자료는 어디에서 받는지 몰라 질문드려요~kjj5421@naver.com으로 자료 요헝 드려도 될까요?

 스무스 스크롤바 이용해서 포트폴리오 사이트 만들고 있어요!그런데 폰으로 확인해보니 스크롤트리거 pin 고정부분은 엄청 부드럽게 작동하고,나머지 부분에선 뻑뻑한데 이유가 뭔지 알 수 있을까요?그리고 강의 너무너무 감사합니다!!덕분에 빠르게 gsap 배우고 있어요!!

선생님, 안녕하세요!모바일 화면에서도 비율을 유지하면서 반응형으로 동작하게 만드는 것이 가능할까요? 여러 방법을 시도해 보았는데, 해결이 잘 안 돼서 이렇게 질문을 남깁니다. 아니면 차라리 모바일 전용 SVG를 따로 만들고, PC 버전에서는 display: none으로 처리한 후 모바일일 때만 보이게 하는 방식이 더 나을까요?조언 부탁드립니다!

안녕하세요 범쌤...! 강의 너무 잘 듣고 있습니다.motionPath를 이용해서 구현하고 싶은 UI가 있습니다.대략적인 구현하고자 하는 모양은 이러합니다.● 디폴트1. 행성이 각 궤도에 맞춰 공전● 행성을 클릭시1. 공전이 멈추고 클릭 된 행성이 줌인2.행성마다 행성의 설명 UI가 보여짐설명이 부족한 것 같아 부족하지만 피그마로 그려서 첨부해봅니다..실무에 필요한데 도저히 감이오지 않아요 ㅜㅜㅜㅜㅜㅜ  

안녕하세요 만들었던 예제를 살펴보는 와중에section1, section4에서 약간의 문제(?)가 발생하여 질문드립니다.section1에서 스크롤을 올려버리면 다시 스크롤을 아래로 내려도 반응이 없고 아예 먹통이 되어버립니다section4에서는 스크롤을 아래로 내리면 먹통이 됩니다혼자 해결해보려고 했으나 감이 오질않아서.. 어떻게 코드를 수정하면 좋을지 질문드립니다!