묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
깊게 파려면 어떤 지식들이 더 있을까요?
혹시 본 강의에서 다루고있지 않지만 필수적인 web 3D 지식들이 있다면 뭐가있을까요?최적화에 관한 부분이나 깊게 파고들만한 부분이 더있는지 궁금합니다
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
PointerLockControls 물체 통과 문의드립니다
안녕하세요? 물리엔진과 관련된 내용인 것 같습니다강사님이 만드신 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 후 전체선택
apply 후 edit mode 에서 전체선택을 했는데, 캡쳐화면처럼 부분 부분 선택이 되고 한번에 전체 선택이 되지 않습니다. 제가 제대로 따라하고 있는 게 맞나요?
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
질문드립니다
안녕하세요 강의 너무 재밌게 잘 수강하고 있습니다.일분이 캐릭터 위에 이것처럼 이름을 띄우고 싶은데 어떤 방식으로 해야할 지 막막해서 여쭤봅니다.
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
OrbitControls가 VS code Live Server에서는 동작을 안합니다
씬,카메라, 조명, 지오메트리등등 모두 문제없이 생성되는데 OrbitControls를 임포트하면 vs code live server에선 구동을 안합니다 왜 그런가요? 콘솔창에서는 딱히 경고 메세지는 뜨지 않습니다. npm start로 서버를 구동하는것과 vs code 플러그인 live server에서 파일을 여는것과 어떤 차이가 있나요?
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
three-to-cannon 라이브러리 추천합니다.
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요!좋은 강의와 커뮤니티를 통한 서포트 덕분에 배운 내용 잘 활용하고 있습니다.실제로 three.js 작업을 하게 되면 gltf 와 같이 이미 작업되어 있는 메쉬를 많이 사용하게 되는데여기에 물리엔진을 넣기 위해 cannon body를 만드는 일이 굉장히 번거롭습니다.저는 three-to-cannon이라는 라이브러리를 사용해 메쉬를 cannon이 사용하는 shape으로 변환하고 있습니다.여러 최적화 옵션도 있고 물리엔진을 적용하는 프로젝트에 사용해보시면 좋을 거 같습니다.
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
npm start 가 되지 않을때 어떻게 하나요?
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 ㅁ문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 아래는 오류메시지 입니다. MACui-MacBook-Air:02 mac$ npm startnpm ERR! Missing script: "start"npm ERR! npm ERR! Did you mean one of these?npm ERR! npm star # Mark your favorite packagesnpm ERR! npm stars # View packages marked as favoritesnpm 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.logMACui-MacBook-Air:02 mac$ n ltsbash: n: command not foundMACui-MacBook-Air:02 mac$ npm startnpm ERR! Missing script: "start"npm ERR! npm ERR! Did you mean one of these?npm ERR! npm star # Mark your favorite packagesnpm ERR! npm stars # View packages marked as favoritesnpm 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.logMACui-MacBook-Air:02 mac$ npm startnpm ERR! code EJSONPARSEnpm ERR! path /Users/mac/Desktop/threejs/02/package.jsonnpm 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.logMACui-MacBook-Air:02 mac$ npm webpack serve --progressUnknown command: "webpack"
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
여기서도 애니메이션이 저장이 안되네요..
본 영상하고 과정복습에서도 애니메이션이 저장이 안돼요ㅠㅠ 영상에서의 블렌더 내보내기하고 현재 사용하고 있는 블렌더 내보내기 과정에서 include 하는 화면이 조금 다르게 보이네요 ㅠㅠ
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
canvas 배경 색 질문입니다
캔버스를 로드하였을 때 저는 배경색이 하얀데 강사님 배경색은 왜 까만색인가요?
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
얼굴을 그리려고 브러쉬로 그리는데
얼굴을 그리려고 브러쉬 검은색으로 해서 그리는데 얼굴 앞면에 그렸는데 색칠이 반대편에 됩니다... ㅠㅠ 그래서 반대편으로 돌려서 뒤통수에 색칠하면 이번엔 원래 얼굴쪽에 색칠이 되구요.. 관통되서 반대편에서 색칠되는데 이건 어떻게 하나요..? ㅠㅠ
-
미해결Three.js 3D 인터랙티브 바로 시작하기
인라인 스크립트(?)로 사용시 type="module"이 적용되지 않는 것 같습니다
선생님 안녕하세요 인터렉티브 강의 잘 들었었는데 궁금했던 three js 강의 준비해주셔서 감사합니다 저는 imweb.me 라는 부트스트랩 기반의 빌더(?)를 이용해서 여러 코드들을 적용해보고 있는데요 .js .css등의 파일을 업로드할 수 있거나, html 파일에 접근하여 수정하는 것은 불가능하고 인라인 태그를 이용한 코드 추가는 가능하다고 합니다 <style></style> <script><script> 강의 첫부분 cdn으로 이용하기에서 정육면체 큐브를 가져오는 것은 정상적으로 동작을 했는데요, 이후 script type="module"만 붙이면 동작을 안합니다 아래와같이 vs코드에서 html파일 내에 작성하고 라이브서버로 오픈하니 예시처럼 잘 작동하는데 똑같이 imweb에서 붙여넣기하니 안됩니다..! 몇 시간 동안 머리싸매다가 혹시나 해서 질문 남깁니다 ㅠㅠ 감사합니다
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
STUDIOMEAL WORLD에서는...
안녕하세요!! 강의를 열심히 듣다가 갑자기 질문이 생겼습니다. 그리고 Pointerlook을 사용한 상태에서 클릭은 어떻게 하나요??ㅜㅜ 포인터도 사라져서 클릭을 어떻게 하는지요! 에러가 뜨는데요! pointerlock상태에서는 클릭이 안되는거 같아용... Studiomeal world에서 가운데에 FPS게임처럼 점 포인터?! 그런것두...혹시...! 어떻게 하나요? 강의 영상에서는 마인크래프트 스타일 컨트롤에서만 Pointerlook을 사용하시던데용!
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
Visual Studio Code 사용 패키치 설치오류
안녕하세요. Visual Studio Code를 잘 사용하다가 이번에 패키지 설치시 문제가 발생했습니다. npm i -D @babel/cli @babel/core @babel/preset-env babel-loader clean-webpack-plugin copy-webpack-plugin core-js cross-env html-webpack-plugin source-map-loader terser-webpack-plugin webpack webpack-cli webpack-dev-server 위 명령어를 실행 했는데 up to date, audited 551 packages in 2s 56 packages are looking for funding run `npm fund` for details 3 high severity vulnerabilities To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. 위와 같이 오류가 발생했습니다. Visual Studio Code 관련파일 삭제 후 재설치를 해도 같은 현상이 나타납니다. 해결방안이 있을까요??
-
미해결
npm ERR! Missing script: "start" 오류 문의 합니다...(three.js로 시작하는 3D 인터랙티브 웹)
강의 내용에 따라서 node.js 설치 후 실행 하였으나 오류가 발생합니다.. 답변 부탁드립니다.. $ node -v v16.14.0 $ npm -v 8.0.0 $ npm start npm ERR! Missing script: "start"npm 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! C:\Users\jsjs7\AppData\Local\npm-cache\_logs\2022-03-02T09_22_57_207Z-debug.log $ n lts bash: n: command not found