173만명의 커뮤니티!! 함께 토론해봐요.
미해결
React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
아래와 같이 코드를 작성했습니다. 렌더링은 잘되며, 에러코드도 안 뜨는데 클릭 이벤트에 응답이 없습니다. import { useLoader, useThree } from '@react-three/fiber'; // import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/Addons.js'; export default function ShowRoom() { const gltf = useLoader(GLTFLoader, './models/custom.glb'); const { raycaster } = useThree(); // console.log(gltf); console.log(raycaster); const handleClick = () => { console.log('click'); const intersects = raycaster.intersectObjects(gltf.scene.children, true); console.log(intersects); }; return ( <primitive object={gltf.scene} onClick={handleClick} /> // <mesh // rotation={[THREE.MathUtils.degToRad(45), THREE.MathUtils.degToRad(45), 0]} // > // <boxGeometry /> // <meshStandardMaterial /> // </mesh> ); }
javascript react typescript 인터랙티브-웹 three.js webgl react-three-fiber
이지현
2026-08-10T07:55:10.185Z
댓글 3
좋아요 0
조회수 32
미해결
Three.js로 시작하는 3D 인터랙티브 웹
큐브의 고개를 들게 만드려면 -20을 해야하는 것 아닌가 싶어 질문드립니다! 마찬가지로 왼쪽을 보게 돌리려면 y도 -인 것 같아요
김소중
2026-07-10T05:15:03.823Z
댓글 1
좋아요 0
조회수 48
미해결
Three.js로 시작하는 3D 인터랙티브 웹
안녕하세요, 여기서부터 vite나 웹팩인 NPM 방식 말고 CDN방식으로 진행하고 싶으면 수업에 나오는 설치 부분이나 서버 구동 부분들은 건너뛰고 나머지는 그대로 진행하면 되나요?
호롤롤로
2026-06-21T08:57:18.617Z
댓글 1
좋아요 0
조회수 42
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.03
윈도우에서는 동작 줄이기가 어디에 있을까요??
javascript 애니메이션 인터랙티브-웹 gsap scrolltrigger
JJJ
2026-05-16T02:35:25.632Z
댓글 1
좋아요 0
조회수 54
미해결
웹 애니메이션을 위한 GSAP 가이드 Part.03
섹션2. Basic Trigger Practice(3) 이 부분을 들었는데요, 여기서 강사님 화면에서는 숫자 0에서 100% 올라가는 숫자카운팅이 보여지는데 전 0% 에서 바로 100% 가 됩니다. 그 이후의 동작은 정상적으로 잘 되는데, 강사님의 소스에서도 동일한 현상이 나타나는데 이유가 뭔지 알 수 있을까요?
javascript 애니메이션 인터랙티브-웹 gsap scrolltrigger
JJJ
2026-04-25T13:12:23.818Z
댓글 2
좋아요 0
조회수 61
미해결
React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
혹시 glb 파일을 이미지 파일만 보고 만들어주는 ai 툴 같은게 있을까요..?
javascript react typescript 인터랙티브-웹 three.js webgl react-three-fiber
jadubell
2026-04-08T11:27:27.483Z
댓글 1
좋아요 0
조회수 97
미해결
Three.js로 시작하는 3D 인터랙티브 웹
box3 position이 box2가 아니라 box1 기준 x축만큼 이동이 됩니다 ㅜㅜ 뭐가 씌인건지 코드와 강의를 몇 번을 확인해 봐도 이유를 모르겠는데 알려주시면 감사드려요 .... (강의 기준 box3.position.x = 0.5 로 하면 box3가 box1과 겹쳐져 잘 안보여서 일단 1로 해뒀습니다) import * as THREE from "three"; import dat from "dat.gui"; // ----- 주제: 그룹 만들기(Scene Graph) 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); // Mesh const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshStandardMaterial({ color: "hotpink", }); const group1 = new THREE.Group(); const box1 = new THREE.Mesh(geometry, material); const group2 = new THREE.Group(); const box2 = box1.clone(); // box1 메쉬 복제 box2.scale.set(0.3, 0.3, 0.3); box2.position.x = 2; // const group3 = new THREE.Object3D(); const group3 = new THREE.Group(); const box3 = box2.clone(); box3.scale.set(0.15, 0.15, 0.15); box3.position.x = 1; group3.add(box3); group2.add(box2, group3); group1.add(box1, group2); scene.add(group1); // AxesHelper // const axesHelper = new THREE.AxesHelper(3); // scene.add(axesHelper); // Dat GUI const gui = new dat.GUI(); gui.add(camera.position, "x", -5, 5, 0.1).name("카메라 X"); gui.add(camera.position, "y", -5, 5, 0.1).name("카메라 Y"); gui.add(camera.position, "z", 2, 10, 0.1).name("카메라 Z"); // 그리기 const clock = new THREE.Clock(); function draw() { const delta = clock.getDelta(); // group1.rotation.y += delta; // group2.rotation.y += delta; // group3.rotation.y += delta; renderer.render(scene, camera); window.requestAnimationFrame(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(); }
hyeonkyeong
2026-02-24T08:06:35.814Z
댓글 1
좋아요 0
조회수 79
미해결
실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)
안녕하세요~ '스크롤/텍스트 애니메이션 제작_2' 강의를 듣다보면 $(document).ready(function){}을 이제 사용 안 한다고 설명하시는데 이유도 설명 부탁드립니다~
HTML/CSS jquery 인터랙티브-웹 반응형-웹
lullulalla
2026-02-07T12:49:11.079Z
댓글 1
좋아요 0
조회수 72
해결됨
React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
안녕하세요. 경험이 더 쌓이거나 혹은 뒤에 진행될 프로젝트를 통해 해소될 수도 있지만 짚고 넘어가고 싶어서 여쭙습니다! 이벤트 객체를 통해서도 다양한 인터랙션을 만들어낼 수 있는데, raycaster를 반드시 써야 하는 상황의 예시가 어떤 것이 있는지 궁금합니다.
javascript react typescript 인터랙티브-웹 three.js webgl react-three-fiber
literate_t
2026-02-03T15:30:40.260Z
댓글 2
좋아요 0
조회수 101
해결됨
몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
targetX += (x - targetX) * speed; targetY += (y - targetY) * speed; 이 코드가 매번 마우스가 움직일 때마다 보간을 구하는 거라면, JS에서는 box.style.top = pageY; box.style.left = pageX; 이렇게 포지션만 잡아주고, .box { transition: top second linear, left second linear; } css에서 transition에 각각 top, left에 linear를 주면, targetX/Y의 선형보간이랑 css에서 transition 선형보간이랑 같은 거 아닌가요? 다르다면 어떤 부분이 다른지 알고 싶습니다!
SuperDuper
2026-01-28T18:10:10.455Z
댓글 1
좋아요 0
조회수 118
해결됨
R3F(React + Three.js / Typescript)로 인터렉티브 포트폴리오 만들기
안녕하세요. 영광스러운 첫 질문이군요! 다름이 아니라 원하는 프레임에 곰이 꿀에 도착하게 하기 위해서 단위 벡터에 다시 dist를 곱해주잖아요. 거리는 변수 이름 그대로 distBearToHoneyVec이니까, 곰에서 꿀까지의 거리인 것 같은데 distanceTo() 함수를 호출하실 때 원점(0, 0, 0) 기준으로 하셨더라고요. 제가 잘못 이해한 건지 실수하신 건지 궁금합니다~
react typescript 인터랙티브-웹 three.js webgl gsap
literate_t
2026-01-28T16:03:40.809Z
댓글 1
좋아요 0
조회수 73
미해결
애플 웹사이트 인터랙션 클론!
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :) - 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다. - 먼저 유사한 질문이 있었는지 검색해보세요. 안녕하세요. 제가 스스로 영상을 찍어서 해보려고 하니 웹페이지 배경이 하얀색이라 영상 찍을때도 하얀색 바탕으로 하면 좋을거 같다고 생각이 들었는데요. 샘플 예제 동영상도 혹시 하얀색 배경에서 영상 촬영을 하신건지 아니면 프레임 추출해서 이미지를 배경제거를 해서 한건지 궁금해서요! 그리고 또 하나 요즘 애플에서는 스크롤이 아니라 부분적으로 영상처럼 작동하던데 그 기술도 인터랙티브 기술일까요? (아직 완강은 못해서 질문한 것일수도 있습니다)
HTML/CSS javascript 웹-디자인 svg 인터랙티브-웹 클론코딩
nhs0912
2025-12-29T06:12:16.166Z
댓글 1
좋아요 0
조회수 99
미해결
3D리플릿 만들기 - 인터랙티브 웹 프로젝트
.page:nth-child(2) 에 .back-btn 버튼이 눌리지 않아, 원본 코드를 보니 .page-face 에 transform-style: preserve-3d; 가 추가 되어 있어서 적용했습니다. 그런데, transform-style: preserve-3d; 를 추가하면 .back-btn 버튼은 눌리지만 사진과 같이 나옵니다. transform-style: preserve-3d; 를 추가하지 않으면 원래대로 처럼 나오지만 .back-btn 버튼이 클릭이 안됩니다. 어떻게 해결해야할까요 ??
HTML/CSS javascript 인터랙티브-웹
디디
2025-11-18T08:07:43.675Z
댓글 1
좋아요 0
조회수 95
미해결
웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
따라하면서 코드작성 하니까 진행이 더뎌서 부탁드려요
HTML/CSS javascript 인터랙티브-웹
유성 김
2025-11-09T09:39:37.986Z
댓글 1
좋아요 0
조회수 72
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.03
안녕하세요. SCROLLTRIGGER-STARTED 폴더에 있는 4-5.Mixed Layout의 index.html 파일을 열어 section02의 horizontal 주석을 해제하고 보았을때 가로 스크롤이 안나타납니다. 제가 뭐 건드린 것은 특별히 없어서 finish폴더의 style.css파일과 비교하였는데도 가로 스크롤이 안나타납니다. 이상태에서 해당 강의 중 settings.js를 만져서 가로 스크롤이 안나타나도록 확인을 해야하는데 가로스크롤이 안나타난 상태에서 강의를 보면서 settings.js파일을 실습하기가 어려울것 같습니다.. 제가 뭘 잘못한게 있을까요?
javascript 애니메이션 인터랙티브-웹 gsap scrolltrigger
미갱이
2025-10-17T04:14:09.663Z
댓글 3
좋아요 0
조회수 129
미해결
React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
primitive는 map을 통해 texture를 불러올 수 없을까요? 다른 텍스쳐 불러오는 연습을 하면서 Material에서는 map이라는 속성을 통해 texture를 불러올 수 있다고 알게 되었는데 primitive에서는 안되서 궁금합니다!
javascript react typescript 인터랙티브-웹 three.js webgl react-three-fiber
study with dino
2025-10-10T14:56:39.238Z
댓글 2
좋아요 0
조회수 127
미해결
Three.js로 시작하는 3D 인터랙티브 웹
강의 잘 듣고 있습니다! 혹시 리액트/next.js와 같이 사용하는 강의 계획은 없으신가요?
blueberryu
2025-10-10T08:12:50.552Z
댓글 1
좋아요 0
조회수 125
해결됨
Three.js 3D 인터랙티브 바로 시작하기
섹션8에서 42강의에서 질문드려요... 강사님 파일 보고 열심히 수정해보긴 했는데,이미지가 4개인데 1개밖에 나오질 않아서요 혹시 몰라 소스를 올려봅니다.
gangsugi
2025-09-20T01:28:19.021Z
댓글 2
좋아요 0
조회수 79
해결됨
Three.js 3D 인터랙티브 바로 시작하기
cdnjs 에서 보면 three.js 버전이 많이 있더라구요, 강사님이 선택하신 버전 이외 것을 연결하면 화면이 안뜨고 강사님 영상에 있는 r128 인가를 하면 뜨는데, 혹시 버전의 차이가 있을까요? 최신버전이 아닌 많이 사용하는 버전인건지해서요,,,,
gangsugi
2025-09-16T05:19:30.571Z
댓글 1
좋아요 0
조회수 91
해결됨
Three.js 3D 인터랙티브 바로 시작하기
갤러리에서 아래 연결주소가 잘못된건지 이미지가 하나도 안나옵니다. const imageMap = new THREE.TextureLoader().load( "https://source.unsplash.com/collection/" + i );
gangsugi
2025-09-13T22:25:01.619Z
댓글 2
좋아요 0
조회수 128
