173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
Three.js 3D 인터랙티브 바로 시작하기
강의대로 const dataArr = [ { "image": "https://i.postimg.cc/ZqSD48GC/image.jpg", "link": "https://gokweol13.yikyung.repl.co", }, 코드를 사용하여 페이지에 삽입한 이미지를 클릭하면 새 창으로 페이지가 새로 만들어지는데, 혹시 한 웹사이트 내에서 페이지 간 이동 할 수 있도록 하려면 어떡해야하나요?
해결됨
Three.js로 시작하는 3D 인터랙티브 웹
Raycater강의를 듣다(특정 광선을 지나가는 메쉬 감지하기) direction벡터의 값을 (0,0,-100)에서 (0,0,-1)로 설정하라고 말씀해주셨는데요, 혹시 길이가 1이 아닐 경우에 제대로 작동하지 않는 이유가 무엇인가요?
미해결
Three.js로 시작하는 3D 인터랙티브 웹
춘식이 강의를 듣고있는중인데 모니터 주사율 때문에 속도가 빨라진 것 같습니다. 이전 강의에서 cannon을 사용할 땐 cannonWorld.step을 수정해서 속도를 맞췄는데 춘식이 예제는 cannon을 사용하지 않는 것 같아서 질문드립니다!
미해결
Three.js로 시작하는 3D 인터랙티브 웹
제목 그대로 입니다 웹팩 콘피그의 엔트리에도 잘들어가 있고 파일 명을 바꾸면 에러를 뱉는것이 잘 연결되어있는 것 같은데, 콘솔을 찍으면 나오지 않습니다. html에 스크립트를 넣어주면 문제없이 콘솔 찍어 냅니다 혹시 예상되는 문제점이 있을까요?
미해결
Three.js로 시작하는 3D 인터랙티브 웹
안녕하세요 선생님 ~ 수업 잘 듣고있습니다! 외부에서 gltf파일이나 glb파일을 불러와서 모델 주위에 충돌 상자를 만들어서 적용하려고 하는데요. 외부에서 불러온 모델들의 너비나 높이, 깊이가 각각 제각각이라 gltf의 정확한 너비, 높이, 깊이값을 알고싶습니다 ㅠㅠ 치수를 얻기 위해 어떻게 해야 될까요?
미해결
Three.js 3D 인터랙티브 바로 시작하기
강의에서는 animations가 하나만 포함된 예제만 알려주셨는데, mixamo나 다른 방법으로 여러개를 가져오는 방법은 없는건가요?
미해결
Three.js로 시작하는 3D 인터랙티브 웹
구글에서 다운 받을 수 있는 glb모델들 중 일부는 처음 새로고침시에는 멀쩡히 서있지만, 걸어다니는 애니메이션을 적용시킬 경우 갑자기 캐틱터가 지평선을 바라보지 않고, 땅바닥을 바라보는? 그런 형태로 바뀌는 경우가 많습니다. 혹시 이 부분은 무엇을 고쳐야 하는 걸까요? (다운 받은 파일은 모두 애니메이션 여러가지를 가지고 있는 경우입니다). 한두개가 아니라 한 열개 정도를 받으면 7,8개에서는 이런 현상이 발생합니다.
미해결
Three.js로 시작하는 3D 인터랙티브 웹
각기 다른 geometry를 가진 mesh를 매 분마다 많은 양을 생성할때 웹 브라우저에 out of memory가 발생하는 이슈가 발생하고 있습니다. 이러한 경우에 효과적으로 최적화를 하려면 어떻게 해야할까요? 또한 스택오버플로 나 다른곳을 보면 geometry가 아닌 buffergeometry를 사용하는데 둘의 차이가 무엇인가요?
미해결
Three.js로 시작하는 3D 인터랙티브 웹
혹시 본 강의에서 다루고있지 않지만 필수적인 web 3D 지식들이 있다면 뭐가있을까요? 최적화에 관한 부분이나 깊게 파고들만한 부분이 더있는지 궁금합니다
미해결
Three.js로 시작하는 3D 인터랙티브 웹
안녕하세요? 물리엔진과 관련된 내용인 것 같습니다 강사님이 만드신 https://studiomeal.com/ 사이트에서는 책장이나 물건을 통과하지 못하게 설정을 되어 있는데, 혹시 물리엔진으로 어떻게 구현하는지 궁금합니다 ㅠ
해결됨
Three.js로 시작하는 3D 인터랙티브 웹
안녕하세요. 해당 강의로 three.js를 처음 접하고 실제 프로젝트에 적용하여 원하는 결과물을 만들 수 있었습니다. 좋은 강의 감사합니다. 결과물을 발전시키는 도중 원하는 표현이 생겼는데 어떻게 구현하면 좋을지 아이디어를 얻고 싶어 문의를 남깁니다. 아래와 비슷하게 특정 지역의 온도를 위치가 정해져 있고 동적으로 색이 바뀌는 기체로 표현하고 싶습니다. three.js의 Fog는 카메라 기준으로 안개가 생기는 방식이라 사용할 수 없을 것 같은데 어떤 방식으로 접근하면 좋을까요? 감사합니다.
미해결
Three.js로 시작하는 3D 인터랙티브 웹
강의 잘보고 있습니다. 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를 업데이트 해도 변하지가 않습니다. 혹시 해당부분을 해결할 방법이 있나요?
미해결
Three.js로 시작하는 3D 인터랙티브 웹
영상을 보면 vscode 에서 자동완성이 되고 계시던데 특별히 설치한 plugin 이 있으실까요??!
미해결
Three.js로 시작하는 3D 인터랙티브 웹
일분코딩님처럼 영상이 나오게 하고 싶은데 texture를 비디오로 불러와서 mapping한 것 같은데 어떻게 하신 것인지 궁금합니다. VideoTexture를 사용하신 것일까요? 그리고 홈페이지 임베디드 같은 경우에는 어떤 방식을 사용하면 가능한지도 궁금합니다
미해결
Three.js로 시작하는 3D 인터랙티브 웹
apply 후 edit mode 에서 전체선택을 했는데, 캡쳐화면처럼 부분 부분 선택이 되고 한번에 전체 선택이 되지 않습니다. 제가 제대로 따라하고 있는 게 맞나요?
미해결
Three.js로 시작하는 3D 인터랙티브 웹
안녕하세요 강의 너무 재밌게 잘 수강하고 있습니다. 일분이 캐릭터 위에 이것처럼 이름을 띄우고 싶은데 어떤 방식으로 해야할 지 막막해서 여쭤봅니다.
미해결
Three.js로 시작하는 3D 인터랙티브 웹
씬,카메라, 조명, 지오메트리등등 모두 문제없이 생성되는데 OrbitControls를 임포트하면 vs code live server에선 구동을 안합니다 왜 그런가요? 콘솔창에서는 딱히 경고 메세지는 뜨지 않습니다. npm start로 서버를 구동하는것과 vs code 플러그인 live server에서 파일을 여는것과 어떤 차이가 있나요?
미해결
Three.js로 시작하는 3D 인터랙티브 웹
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :) - 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다. - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요! 좋은 강의와 커뮤니티를 통한 서포트 덕분에 배운 내용 잘 활용하고 있습니다. 실제로 three.js 작업을 하게 되면 gltf 와 같이 이미 작업되어 있는 메쉬를 많이 사용하게 되는데 여기에 물리엔진을 넣기 위해 cannon body를 만드는 일이 굉장히 번거롭습니다. 저는 three-to-cannon 이라는 라이브러리를 사용해 메쉬를 cannon이 사용하는 shape으로 변환하고 있습니다. 여러 최적화 옵션도 있고 물리엔진을 적용하는 프로젝트에 사용해보시면 좋을 거 같습니다.
미해결
Three.js로 시작하는 3D 인터랙티브 웹
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :) - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 ㅁ문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 아래는 오류메시지 입니다. MACui-MacBook-Air:02 mac$ npm start npm ERR! Missing script: "start" npm ERR! npm ERR! Did you mean one of these? npm ERR! npm star # Mark your favorite packages npm ERR! npm stars # View packages marked as favorites npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm run npm ERR! A complete log of this run can be found in: npm ERR! /Users/mac/.npm/_logs/2022-08-13T04_42_44_373Z-debug-0.log MACui-MacBook-Air:02 mac$ n lts bash: n: command not found MACui-MacBook-Air:02 mac$ npm start npm ERR! Missing script: "start" npm ERR! npm ERR! Did you mean one of these? npm ERR! npm star # Mark your favorite packages npm ERR! npm stars # View packages marked as favorites npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm run npm ERR! A complete log of this run can be found in: npm ERR! /Users/mac/.npm/_logs/2022-08-13T04_43_52_792Z-debug-0.log MACui-MacBook-Air:02 mac$ npm start npm ERR! code EJSONPARSE npm ERR! path /Users/mac/Desktop/threejs/02/package.json npm ERR! JSON.parse Unexpected token "{" (0x7B) in JSON at position 541 while parsing near "...: \"^0.143.0\"\n }\n}\n\n{\n \"name\": \"threejs..." npm ERR! JSON.parse Failed to parse JSON data. npm ERR! JSON.parse Note: package.json must be actual JSON, not just JavaScript. npm ERR! A complete log of this run can be found in: npm ERR! /Users/mac/.npm/_logs/2022-08-13T04_45_27_810Z-debug-0.log MACui-MacBook-Air:02 mac$ npm webpack serve --progress Unknown command: "webpack"
미해결
Three.js로 시작하는 3D 인터랙티브 웹
본 영상하고 과정복습에서도 애니메이션이 저장이 안돼요ㅠㅠ 영상에서의 블렌더 내보내기하고 현재 사용하고 있는 블렌더 내보내기 과정에서 include 하는 화면이 조금 다르게 보이네요 ㅠㅠ
