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
댓글 2
좋아요 0
조회수 25
미해결
Three.js로 시작하는 3D 인터랙티브 웹
큐브의 고개를 들게 만드려면 -20을 해야하는 것 아닌가 싶어 질문드립니다! 마찬가지로 왼쪽을 보게 돌리려면 y도 -인 것 같아요
김소중
2026-07-10T05:15:03.823Z
댓글 1
좋아요 0
조회수 47
미해결
Three.js로 시작하는 3D 인터랙티브 웹
안녕하세요, 여기서부터 vite나 웹팩인 NPM 방식 말고 CDN방식으로 진행하고 싶으면 수업에 나오는 설치 부분이나 서버 구동 부분들은 건너뛰고 나머지는 그대로 진행하면 되나요?
호롤롤로
2026-06-21T08:57:18.617Z
댓글 1
좋아요 0
조회수 41
미해결
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
조회수 96
미해결
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
조회수 77
해결됨
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
조회수 100
해결됨
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
미해결
떠먹는 Three.js
맥북 사용중이고 displaylink manager를 사용해서 듀얼모니터에 연결해서 강의를 듣고있습니다. 그런데 강의 보기 너무불편합니다. 아예 듀얼모니터 다 연결하면 검정화면으로 보여요 저작권 보호를 위해 막아두신건 알겠습니다. 해결방안으로 하드웨어 가속 끄기 설정이던데 로컬에서 서버 실행시 threejs 가 안보이고 빈화면으로 보이게됩니다. 이거 어떻게 못할까요ㅜㅠ 무단으로 복제해가는사람들은 어떻게든 복제해갑니다.. 강의들을때 너무 불편합니다.
HTML/CSS javascript three.js
지원
2026-01-20T06:21:30.360Z
댓글 1
좋아요 0
조회수 121
미해결
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
조회수 126
미해결
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
조회수 122
해결됨
떠먹는 Three.js
아직 초반부지만 열심히 듣고 있는데요, 섹션3에서 각각의 명령어를 설명하시면서 직접 마우스로 움직이면서 하시더라구요 강사님 설명을 들으면서 입력해보고는 있는데 그렇게 움직이면서는 확인이 안되어서요.... 따로 코딩을 더 넣어야 하는건지 아님 제가 놓친 부분이 있는지 해서요
HTML/CSS javascript three.js
gangsugi
2025-08-29T22:25:31.000Z
댓글 1
좋아요 0
조회수 68
미해결
Three.js로 시작하는 3D 인터랙티브 웹
01_CDN 이라는 폴더가 소스코드 다운로드 받았을 때 아무리 찾아도 없습니다..
열심인 참새
2025-06-14T06:06:10.686Z
댓글 2
좋아요 0
조회수 156
미해결
Three.js 3D 인터랙티브 바로 시작하기
코드를 복붙해보려해도, 현재는 html과 js가 분리된 코드만 나오고, three.js파일은 사이트에서 다운로드한거 폴더 찾아봐도 없네요 수업자료 주신 파일을 그냥 소스코드처럼 이용하면 되는건가요
준혁김
2025-05-15T12:46:20.778Z
댓글 1
좋아요 0
조회수 145
미해결
Three.js로 1인칭 3D 웹사이트 만들기
사진처럼 터치를 하고 드래그를 하면 카메라가 돌아가는것이 아니라 웹 화면 자체가 끌려 가는데.. html, canvas, body 에 touch-action 옵션을 none으로도 줘보고 touch 이벤트들에 preventDefault도 줘보고 했지만 해결이 되질 않습니다.. 터치 드래그를 하면 moveMentX와 moveMentY의 값은 잘 출력되는데 카메라가 회전을 하지 않습니다. 데스크탑에서 mousemove는 제대로 카메라가 돌아가는데, 모바일버전에서 touchmove는 카메라가 돌아가질 않네요.
javascript 인터랙티브-웹 포트폴리오 three.js 3d
준규
2025-04-22T08:28:34.295Z
댓글 1
좋아요 0
조회수 320
미해결
Three.js로 시작하는 3D 인터랙티브 웹
Box 지오메트리를 이용하였기 때문에 정육면체인데, materials 배열에 있는 여섯개의 원소들 순서가 정해져 있는걸까요? 자동으로 frontTexture가 앞에 렌더링되고 rightTexture가 우측에 렌더링 되는걸까요?? 만약 Box가 아니라 sphere이라면 materials 배열엔 어떻게 다른 텍스쳐를 넣을 수 있을까요? 또 예로 cone 지오메트리라면 material에 넣는 순서가 어떻게 될까요?
준규
2025-04-04T08:23:25.515Z
댓글 0
좋아요 0
조회수 141
미해결
Three.js로 시작하는 3D 인터랙티브 웹
안녕하세요 강의 너무 잘보고있습니다. https://inf.run/SELR1 여기보면 일단 gltf 사용을 추천하고있던데 glb는 하나의 파일에 모든게 담겨있는 형태라 관리가 용이하다고 나오더라구요. 서비스에서 사용하는 입장에서 둘중에 어느걸 사용하는게 성능면에서 좋은걸까요?
김영호
2025-04-04T05:50:09.511Z
댓글 1
좋아요 0
조회수 273
미해결
Three.js로 시작하는 3D 인터랙티브 웹
normal 유리판을 클릭했을 때, actions[0] 를 stop해서 default 모션은 삭제를 하지만 점프 모션은 계속 하더라구요. 사진처럼 점프도 삭제를 해야 정상적으로 작동이 되는데 혹시 강의에서는 따로 삭제를 안해도 점프모션이 반복되지 않는 이유가 뭘까요?! 추가로 strong을 선택할때도 1초 후에는 다시 점프모션을 stop 해주었습니다.
준규
2025-03-27T11:37:54.371Z
댓글 2
좋아요 0
조회수 165
