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

안녕하세요. 선생님 질문있습니다. 강의에 보면 let mesh로 변수를 선언해서 반복문내에서 사용하셨는데const meshes = []; let mesh; for (let i = 0; i < 10; i++) { mesh = new THREE.Mesh(geometry, material); mesh.position.x = Math.random() * 5 - 2.5; mesh.position.z = Math.random() * 5 - 2.5; scene.add(mesh); meshes.push(mesh); }다음과 같이 반복문 내에 const로 선언하고 사용해도 같은 결과가 나오는데 반복문 밖에서 선언 후 사용하신 이유가 따로 있을까요?const meshes = []; for (let i = 0; i < 10; i++) { const mesh = new THREE.Mesh(geometry, material); mesh.position.x = Math.random() * 5 - 2.5; mesh.position.z = Math.random() * 5 - 2.5; scene.add(mesh); meshes.push(mesh); }  

이전 수업에서 ilbuni.glb를 로드했을 땐 정상적으로 작동했는데, test.glb로 바꾸니까 이런 에러가 뜨네요 ...uuid가 토큰같은 id처럼 보이는데 ,, 어떻게 해결해야 할까요? ㅜㅜ

안녕하세요 1분코딩님 강의에서처럼import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; // gltf loader const loader= new THREE.GLTFLoader; GLTFLoader.load( '/models/ilbuni.gltf', gltf => { console.log(gltf) } ); 이렇게 입력했는데, localhost:8080에서export 'GLTFLoader' (imported as 'THREE') was not found in 'three' 와 같은 오류가 뜹니다. three.js의 폴더는 평소에 잘 실행 된 것 처럼 위치해 있는 거 같은데, 무엇이 잘못되었는지를 모르겠습니다.  

선생님이 만든 캐릭터는 캐릭터에 그림자가 정상적으로 생기던데, 제가 만들면서 빠뜨린 게 있을까요?

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

Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform 화면 캡쳐 첨부 합니다

강의대로 const dataArr = [ { "image": "https://i.postimg.cc/ZqSD48GC/image.jpg", "link": "https://gokweol13.yikyung.repl.co", },코드를 사용하여 페이지에 삽입한 이미지를 클릭하면 새 창으로 페이지가 새로 만들어지는데, 혹시 한 웹사이트 내에서 페이지 간 이동 할 수 있도록 하려면 어떡해야하나요?

Raycater강의를 듣다(특정 광선을 지나가는 메쉬 감지하기)direction벡터의 값을 (0,0,-100)에서 (0,0,-1)로 설정하라고 말씀해주셨는데요,혹시 길이가 1이 아닐 경우에 제대로 작동하지 않는 이유가 무엇인가요?

춘식이 강의를 듣고있는중인데모니터 주사율 때문에 속도가 빨라진 것 같습니다.이전 강의에서 cannon을 사용할 땐 cannonWorld.step을 수정해서 속도를 맞췄는데춘식이 예제는 cannon을 사용하지 않는 것 같아서 질문드립니다! 

제목 그대로 입니다 웹팩 콘피그의 엔트리에도 잘들어가 있고 파일 명을 바꾸면 에러를 뱉는것이 잘 연결되어있는 것 같은데, 콘솔을 찍으면 나오지 않습니다.html에 스크립트를 넣어주면 문제없이 콘솔 찍어 냅니다혹시 예상되는 문제점이 있을까요?

안녕하세요 선생님 ~ 수업 잘 듣고있습니다!외부에서 gltf파일이나 glb파일을 불러와서 모델 주위에 충돌 상자를 만들어서 적용하려고 하는데요.외부에서 불러온 모델들의 너비나 높이, 깊이가 각각 제각각이라 gltf의 정확한 너비, 높이, 깊이값을 알고싶습니다 ㅠㅠ치수를 얻기 위해 어떻게 해야 될까요?

강의에서는 animations가 하나만 포함된 예제만 알려주셨는데, mixamo나 다른 방법으로 여러개를 가져오는 방법은 없는건가요?

구글에서 다운 받을 수 있는 glb모델들 중 일부는 처음 새로고침시에는 멀쩡히 서있지만, 걸어다니는 애니메이션을 적용시킬 경우 갑자기 캐틱터가 지평선을 바라보지 않고, 땅바닥을 바라보는? 그런 형태로 바뀌는 경우가 많습니다. 혹시 이 부분은 무엇을 고쳐야 하는 걸까요? (다운 받은 파일은 모두 애니메이션 여러가지를 가지고 있는 경우입니다). 한두개가 아니라 한 열개 정도를 받으면 7,8개에서는 이런 현상이 발생합니다. 

각기 다른 geometry를 가진 mesh를 매 분마다 많은 양을 생성할때 웹 브라우저에 out of memory가 발생하는 이슈가 발생하고 있습니다. 이러한 경우에 효과적으로 최적화를 하려면 어떻게 해야할까요? 또한 스택오버플로 나 다른곳을 보면 geometry가 아닌 buffergeometry를 사용하는데 둘의 차이가 무엇인가요?

혹시 본 강의에서 다루고있지 않지만 필수적인 web 3D 지식들이 있다면 뭐가있을까요?최적화에 관한 부분이나 깊게 파고들만한 부분이 더있는지 궁금합니다

안녕하세요?  물리엔진과 관련된 내용인 것 같습니다강사님이 만드신 https://studiomeal.com/ 사이트에서는 책장이나 물건을 통과하지 못하게 설정을 되어 있는데, 혹시 물리엔진으로 어떻게 구현하는지 궁금합니다 ㅠ 

안녕하세요. 해당 강의로 three.js를 처음 접하고 실제 프로젝트에 적용하여 원하는 결과물을 만들 수 있었습니다.좋은 강의 감사합니다.결과물을 발전시키는 도중 원하는 표현이 생겼는데 어떻게 구현하면 좋을지 아이디어를 얻고 싶어 문의를 남깁니다.아래와 비슷하게 특정 지역의 온도를 위치가 정해져 있고 동적으로 색이 바뀌는 기체로 표현하고 싶습니다.three.js의 Fog는 카메라 기준으로 안개가 생기는 방식이라 사용할 수 없을 것 같은데어떤 방식으로 접근하면 좋을까요? 감사합니다.

강의 잘보고 있습니다. ThreeJS 관련해서는 이강좌 만한게 없네요^^ 저번에 ThreeJS를 이용한 그래프만들기를 문의 했습니다. https://www.inflearn.com/questions/499689/%EA%B0%95%EC%9D%98-%EB%84%88%EB%AC%B4-%EC%9E%98%EB%93%A3%EA%B3%A0-%EC%9E%88%EC%8A%B5%EB%8B%88%EB%8B%A4-%EC%A7%88%EB%AC%B8-%EB%93%9C%EB%A6%BD%EB%8B%88%EB%8B%A4 제가 구성해야할 Bar가 256*60개여서 해당부분으로 해보니 프레임이 너무 안나와서 geometry를 합쳐서 하나의 mesh로 구성해 보았습니다.  let geometrys = []; class Bar { constructor(info = {}) { this.container = info.container; this.value = info.value || 0; const heightValue = (this.value / maxValue) * maxBarHeight; this.x = info.x || 0; this.y = heightValue / 2; this.z = info.z || 0; const geometry = new THREE.BoxGeometry(1, 1, 1); originHelper.position.set(this.x, this.y, this.z); originHelper.scale.set(1, heightValue, 4); originHelper.updateMatrixWorld(true, false); geometry.applyMatrix4(originHelper.matrixWorld); geometrys.push(geometry); } } for (let i = 0; i < 256 * 60; i++) { const value = Math.random() * 255; new Bar({ value, x: (i % 255) * barDistance + 1, y: 0, z: parseInt(i / 256) * 4, }); } // 생성한 geometry를 전부 합침 let mergedGeometry = mergeBufferGeometries(geometrys, false); let mesh = new THREE.Mesh(mergedGeometry, basicMaterial); scene.add(mesh); // 그리기 const clock = new THREE.Clock(); function draw() { /////////////////////////////////////// for (let i = 0; i < 256 * 60; i++) { const value = Math.random() * 255; const heightValue = (value / maxValue) * maxBarHeight; const y = heightValue / 2; originHelper.position.set( (i % 255) * barDistance + 1, y, parseInt(i / 256) * 4 ); originHelper.scale.set(1, heightValue, 4); originHelper.updateMatrixWorld(true, false); geometrys[i].applyMatrix4(originHelper.matrixWorld); } renderer.render(scene, camera); renderer.setAnimationLoop(draw); // requestAnimationFrame(draw); }이렇게 구성해보고 프레임마다 난수를 발생해서 그래프가 갱신하게 구성하고 싶은데 mesh와 다르게 geometry의 matrix를 업데이트 해도 변하지가 않습니다. 혹시 해당부분을 해결할 방법이 있나요?

영상을 보면 vscode 에서 자동완성이 되고 계시던데 특별히 설치한 plugin 이 있으실까요??!