월 33,000원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
mesh 배열 질문
안녕하세요 선생님 선생님 강의를 따라하다가 애니메이션 부분을 일부러 안지우고 배열을 만들고 있었는데아래와 같이 메쉬들 중 1개만 로테이션 되어 올라가는 현상이 있습니다. 관련하여 너무 궁금하여 질문 드립니다.1 ) 왜 모든 메쉬가 회전하여 올라가지 않고 1개만 올라가는건가요? 2) for문에서 meshes 배열에 mesh객체들을 모두 push로 넣으면 모든 메쉬가 다 배열안으로 들어갔기 때문에메쉬가 1개라도 회전하면 안되지 않나용?<하나만 올라오는 메쉬 이미지>코드는 아래처럼 사용했습니다.. const meshes = []; let mesh; for (let i = 0 ; i < 10; i++){ mesh = new THREE.Mesh(geometry, material); mesh.position.x = Math.random() * 5 mesh.position.z = Math.random() * 5 scene.add(mesh); meshes.push(mesh); } let oldTime = Date.now(); //그리기 function draw() { const newTime = Date.now(); const deltaTime = newTime - oldTime; oldTime = newTime; mesh.rotation.y += deltaTime * 0.001; mesh.position.y += 0.01; renderer.render(scene, camera); window.requestAnimationFrame(draw); } 선생님 하나더 질문이 있습니다! 위에 for문 속의 THREE.Mesh()로 메쉬 실행시에 폴더경로 : three > build > three.js 의 아래부분이 실행되는건가요?위 코드에서 만들어진 생성자 함수로 만든 mesh객체들이 배열안드로 들어간다고 보면 되는걸까요?저는 push하게 되는순간 위에 랜덤값이 들어간 객체 자체가 배열로 들어간다고 생각했습니다.. 아래처럼요너무 궁금합니다...<제가 상상한 객체를 배열로 푸쉬하는 모습>meshes = [ {position.x : 1.2 , position.y : 3.2 , ...............} //이런 모습보다 더 복잡하겠지만 '객체' 자체가 들어간다는것이 궁금합니다! {position.x :1 , position.y :2 , ...............} {position.x :4, position.y : 3.8 , ...............} 푸쉬 되는중....]궁금해서 찾아본 원래 클래스들인데.. class Mesh extends Object3D { constructor(geometry = new BufferGeometry(), material = new MeshBasicMaterial()) { super(); this.isMesh = true; this.type = 'Mesh'; this.geometry = geometry; this.material = material; this.updateMorphTargets(); class Object3D extends EventDispatcher { constructor() { super(); this.isObject3D = true; Object.defineProperty(this, 'id', { value: _object3DId++ }); this.uuid = generateUUID(); this.name = ''; this.type = 'Object3D'; this.parent = null; this.children = []; this.up = Object3D.DefaultUp.clone(); const position = new Vector3(); const rotation = new Euler(); const quaternion = new Quaternion(); const scale = new Vector3(1, 1, 1); - 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
index.html에 main.js를 넣지 않아도 가능한 이유 궁금합니다.
index.html에 main.js를 넣지 않아도 가능한 이유 궁금합니다.웹팩 파일 속의 코드에 모듈.익스포트 부분에 엔트리 파일로 main.js가 있어서 자동 그렇게 연결되는건가요? .. mode: webpackMode, entry: { main: './src/main.js', }, output: { path: path.resolve('./dist'), filename: '[name].min.js' }, // es5로 빌드 해야 할 경우 주석 제거 // 단, 이거 설정하면 webpack-dev-server 3번대 버전에서 live reloading 동작 안함 // target: ['web', 'es5'], devServer: { liveReload: true }, - 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
안녕하세요 선생님 강의 다봤는데요 궁금한점이 있습니다.
춘식이 사이트는 움직일때 발자국이 남는데 그건 어떻게 구현해야 잘 구현하기 좋을까요??
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
Frustum 질문입니다
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요.이전 글에서 알려주신대로 frustum 사용해서 오브젝트가 벽에 부딪히는 듯한 인터랙션을 만들긴 했는데이게 mesh의 포지션을 사용하다보니 오브젝트가 돌아가있는 경우에는 정확하게 벽에 부딪히지 않습니다.mesh의 특정 포지션보다는 mesh가 차지하는 영역과 frustum이 만나는 때에 인터랙션이 적용되게 하면 더 좋을 거 같은데혹시 떠오르는 방법이 있으신가요?frustum.intersectsObject(mesh) 를 사용해봤는데 블렌더에서 가져온 mesh라 그런지 다음과 같은 에러가 발생합니다.Uncaught TypeError: Cannot read properties of undefined (reading 'boundingSphere') at Frustum.intersectsObject (three.module.js:12455:1) at updatePhysics (interactions.js:153:1) at draw (interactions.js:264:1) at onAnimationFrame (three.module.js:27781:1) at onAnimationFrame좋은 강의 외에도 도움 많이 받고 있습니다. 사이드 프로젝트가 완성되면 코드 공유하도록 하겠습니다. 감사합니다!
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
Raycaster 질문입니다.
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요!Raycaster 사용해서 클릭 이벤트를 넣어보려고 강의 코드를 참고해서 구현하고 있습니다.제가 개발한 코드는 카메라가 (0,2,0)에 있고 원점에 있는 오브젝트를 바라보고 있습니다.이런 상황에서도 raycaster를 만들 때 mouse를 vector2로 선언하고 강의 자료와 같이 x, y 좌표를 넣어주면 되는 건가요?혹시 다르게 넣어줘야 한다면 어떻게 넣어주면 될까요?좋은 강의 덕분에 사이드프로젝트 잘 진행하고 있습니다. 감사합니다.
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
cannon js position 문의
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. cannon body가 웹페이지에서 보이는 캔버스 영역 바깥으로 나가지 않게 하고 싶습니다.캔버스 영역 경계면에 해당하는 cannon js position을 어떻게 가져올 수 있을까요?좋은 강의 감사합니다!
- 해결됨Three.js로 시작하는 3D 인터랙티브 웹
setTimeout 이후에 clearTimeout 을 하는 이유
혹시 setTImeout 이후에 clearTimeout을 하는 이유가 단순히 메모리 사용때문인가요? 강의중 들은 내용을 토대로 작업하다 왜 저렇게 사용했어요? 라는 질문을 받았습니다. 제대로 답을 드리지 못해서 일단 clearTimeout을 제거했는데 관련 문서를 찾아봐도 clearTimeout을 굳이 사용하지 않아도 된다 라는 내용이 지배적이라 이렇게 질문 드립니다..
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
box3 scale 질문
box3은 box2를 클론 한 것인데box3.scale.set(1,1,1)을 해보니까 box1과 같은 크기의 메쉬가 생기네요. 왜 box1을 기준으로 두는건가요??box2.scale.set(0.3,0.3,0.3); 과 같은 크기의 box3이 만들어 질 것이라 생각했는데 그게 아니네요.심지어 box3.position.x 는 box2를 기준으로 둬서 더 헷갈려요.(box3.position.x = 0;를 해 본 결과 box2와 겹쳐짐)
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
geometry error
geometry 형태조작하기에 three.module.js:10591 THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values.이런 에러가 발생해요.무슨문제일까욥
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
노드와 three.js import 오류
node로 서버를 연결해서 만들고 있는데 서버를 실행하면 아래와 같은 오류가 뜹니다.강의에 나온 것처럼이렇게 import 하면 안 된다는 것 같아서이렇게 바꿔도 봤는데 또 같은 오류가 뜨더라구요..어떻게 해결해야 할지 아무리 찾아도 나오지 않아서 질문합니다.간절해요..(노드와 index.html을 연결했고, html 안에 three.js를 연결지었습니다)
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
패널에 이미지가 아닌 Iframe을 넣는 방법
안녕하세요 선생님~!제가 패널을 이용해서 제가 만든 웹사이트들을 Iframe을 이용해서바로 보여주고 싶은데 관련 문서를 5시간 가량 각종 단어와 유튜브, 구글링을 통해 알아봤지만 방법을 알 수 없었습니다 ㅠㅠ제가 아직 초보 코린이라서 소스를 봐도 이해가 되지 않아서 그런 것 같은데 패널 안에 이미지가 아니라 iframe을 넣을 수 있는 방법이 있을까요..?제가 구현하고 싶은 느낌은(https://codesandbox.io/s/mixing-html-and-webgl-w-occlusion-9keg6?file=/src/App.js) 이런 느낌인데 아직 모델링은 만들지않았고 우선 테스트용으로 패널만 만들어서 넣고 싶은데 잘 모르겠습니다 ㅠ
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
저는 Animation은 있는데 Mesh가 없네요
저는 Animation은 잘 들어있는데 오히려 Scene.children이 비어있네요... 뭐가 잘못되었을까요{scene: Group, scenes: Array(1), animations: Array(2), cameras: Array(0), asset: {…}, …}animations: Array(2)0: AnimationClip {name: 'Default', tracks: Array(18), duration: 2.5, blendMode: 2500, uuid: 'b9c425b7-9d27-47b2-b179-689c8ef919e9'}1: AnimationClip {name: 'jump', tracks: Array(18), duration: 2.5, blendMode: 2500, uuid: '2de2b463-c311-4e6b-b604-5d739ac9fed5'}length: 2[[Prototype]]: Array(0) scene: Groupanimations: []castShadow: falsechildren: Array(0)length: 0
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
프로젝트를 github.io에 배포하려고 할 때와 scss사용시 경로 설정
안녕하세요 선생님! 정말 귀한 강의 잘 보고 있습니다! 질문1.혹시 추후 three.js 프로젝트 진행 후npm run build를 할 때package.json에"homepage": "https://깃허브경로.github.io/프로젝트dist폴더",이렇게 홈페이지 경로 지정 하지 않아도 되는 걸까요?선생님 강의 들은 후 개인 프로젝트를 깃허브 블로그에 업로드 해서 개인 포트폴리오 사이트로 공개하려고 하는데이전에 다른 프로젝트 진행할 땐 위와같이 홈페이지 경로를 설정 후 퍼블릭 경로 설정 해준 뒤에 배포 했었거든요! 질문2. 만약 scss를 사용하고자 한다면 어떻게 설정해야할까요?이전에는 node에서 scss설치 후 사용하였고 컴파일된 css를 html에 연결해서 사용했는데 웹팩도 동일하게 사용하면 될까요? 예를 들자면, 저의 경우 style.scss가 있고style.scss 안에 _button.scss를 import 했습니다. 그 후 style.scss가 컴파일 된 style.css를 html에 링크해주었는데 이렇게 사용해도 무방한지. 아니면 webpack의 경우 자동으로 컴파일링 해주는지 궁금하고만약 css파일을 사용하지 않고 scss 파일만 사용해도 된다면어떻게 경로를 설정해주어야 할까요 ㅠㅠ? 바쁘실텐데 죄송합니다! 귀한 강의 정말 감사드리며 항상 행복하세요!
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
Next.js로 dat.gui 사용하기
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.현재 Next.js로 threeJs 강의 수강 중에 있습니다. npm에 react-three 라이브러리가 있지만 사용하지 않고 강의 내용 그대로 코딩하고 있는데요, Next.js에서 dat.gui를 import 하면 window is not found 에러가 발생합니다. 해결 방법이 있을까요??
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
프로젝트 완성 후 깃허브로 배포후 glb,sound파일이 로드가 안돼요
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 제목과 같이 깃허브에 빌드한 dist파일로 배포를 해봤는데 glb파일과 sound파일들은 로드가 안돼요..왜 그럴까요??
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
바닥에서 뱅글뱅글 도는 이미지.
좋은강의 먼저 감사드립니다.선생님과 동일하게 만들어 보다가, 첨부드리는 이미지의 핑크색 동그라미 부분, 구의 바닥 부분에 이미지가 2장? 겹쳐서 보이는 부분이 나타납니다. (ex06 (이미지 사용), ex05(red단색) 동일하게 나타나는 현상)마우스 컨트롤로 화면을 움직여 보면, 혼자 뱅그르르 계속 돌고 있고 없어지진 않습니다..... SphereGeometry의 각 정점을 추출해서, 그 자리에 image texture를 입힌 PlaneGeometry로 대체하는것으로 배웠는데요, SphereGeometry의 중복되는 포인트가 있어서 해당 문제가 발생되는걸까요..?혹시나 해서, ex01예제를 다시 확인 해 보았어요.ex01에서 보았던 포인트만으로 표현 구를 만들었을때 샘플입니다.SphereGeometray(1,8,8)값으로 생성한 구 인데, 마우스 드래그로 확대해서 보면, 위/아래 모두 점 하나로 구성된것으로 보입니다.점 하나에 이미지 하나라면, 지금 이 현상은 왜 일어나는지 궁금합니다. ㅡㅜ
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
정면뷰를 보기 위해 연두색 동그라미를 누를때.
안녕하세요. :)얼마 전 새 강의가 올라온것 같아 정주행 중인 1인 입니다.좋은 강의 오픈해 주셔서 먼저 감사인사 드립니다. :)몸통만들기에서, 정면뷰를 보기위해서 연두색 동그라미를 클릭하시는데요, 클릭한 뒤 X축 방향이 선생님 방향과 반대로 나타나는것 같아 문의드립니다.일단, 아래 화면 첨부 합니다... (핫핑크로 동그라미 표시...)[ 선생님 화면 ][ 학생 화면 ]녹색동그라미 (Y)를 클릭했을 경우,저 같은 경우는 X - Y - (-X)의 순서로 가로가 정렬되고,선생님의 경우는 (-X) - Y - (X)의 순서로 정렬이 되는것 같습니다.저는 가운데가 비어있는 원인것에 반해, 선생님 화면에서는 가운데도 색이 들어가 있는 원이 계속 표기되는것 같구요.처음에는 그냥 연두색(-Y)를 눌러 X를 선생님과 같이 옆에두고 그렸는데, 3차원이고 작업을 하다보면 나중에 결과물이 반대로(?) 바라보고 있는 일분이가 될것 같아, 다시 선생님과 동일하게 돌려서 그려보다가.... 왜 다른지 궁금해서 문의드려 봅니다.혹시 이부분도 설정값에서 변경하거나 맞출 수 있을까요?참고로, 지금 사용중인 버전은 3.3.0 (2022-09-07) 입니다.
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
캐릭터 이동시키면 z축 회전을 합니다
블렌더에서 새로 캐릭터 만들어서 적용해보고 있는데요일분이는 발이 땅에 고정된 상태로 이리저리 이동하는데방향을 바꿀 때 제 캐릭터는 다리가 땅에 고정되어있지 않고, 그러니까 Y축 회전을 하는게 아니고z축으로 회전해요...처음 시작 자세는 정상으로 뜨는데마우스 클릭으로 움직임 활성화하는 순간 자세가 변합니다위치 이동은 문제없이 잘 되고요어떤 것을 고쳐야할까요?ㅠㅠ
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
orbitControls 을 사용할 때
orbitControls 을 사용할 때,마우스휠이 기준점 기준으로 움직이는게 아닌 카메라가 보는 방향대로 확대,축소 할수있는 방법은없을까요 ? 작은 단위의 특정 오브젝트를 지정하는건 많이 힘드네요..
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
캔버스.... 저만 하얗게 나오는것 아니죠??
쌤 따라서 그래도 수업을 진행하는데, 검은 색 화면이 나오지 않았습니다. console창에 JS error 없고, elements tab에서도 canvas가 제대로 보이고...뭔가 찜찜한 마음에, 지우고 다시 깔고, 다시 또해보고...한시간 이상 삽질해도 해결불가. ㅡㅜ포기하고, 일단은 그냥 에러 없으니깐 계속 진행 해 보았습니다. 몇 강 뒤에 Mesh 파트 나오는데, 거기서 하나씩 타이핑 해 보다가 원인을 발견 한 듯 합니다.!!저 처럼 답답하실 분 계실테니, 결론부터 말씀 드리면, renderer.render(scene, camera) 를 통해 화면에 그려줘야 실제 화면에 검은색 배경과 함께 mesh도 그려집니다.일단 전, three 0.144 버전을 사용중이구요. 나머진 쌤이 제공해 주신 템플릿 쓰니 다른 환경은 비슷할듯 합니다.아래 캡쳐 추가 합니다. 혹이 이 문제가 아니면...다른분 답변 부탁드려요.[ before ][ after ]