inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

176만명의 커뮤니티!! 함께 토론해봐요.

threejs의 최적화를 하려면 어떻게 해야할까요?

미해결

Three.js로 시작하는 3D 인터랙티브 웹

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

  • blender
  • 인터랙티브-웹
  • three.js
이상 댓글 1 좋아요 0 조회수 1527

깊게 파려면 어떤 지식들이 더 있을까요?

미해결

Three.js로 시작하는 3D 인터랙티브 웹

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

  • blender
  • 인터랙티브-웹
  • three.js
댓글 1 좋아요 2 조회수 412

텐키리스 키보드 쓰는데

미해결

Blender(블렌더) 3.0 3D 그래픽의 입문 Part. 1

블렌더는 단축키를 숫자키쪽에 쓰는 방식이 초반에 몇개 나와서 당황스럽네요ㅠㅠ 숫자키쪽 단축키 쓸일이 많지 않기를...

  • blender
  • 3d-modelling
융단 댓글 1 좋아요 0 조회수 1244

PointerLockControls 물체 통과 문의드립니다

미해결

Three.js로 시작하는 3D 인터랙티브 웹

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

  • blender
  • 인터랙티브-웹
  • three.js
  • 인터랙티브-웹
  • Three.js
mat kim 댓글 1 좋아요 0 조회수 491

질문드립니다.

해결됨

Three.js로 시작하는 3D 인터랙티브 웹

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

  • 인터랙티브-웹
  • 인터랙티브-웹
  • blender
  • three.js
  • Three.js
뭔말인지알겠다 댓글 2 좋아요 0 조회수 986

가위 손잡이 모델링 폴리곤 엉킴

미해결

Blender(블렌더) 3.0 3D 그래픽의 입문 Part. 2

손잡이 안쪽에 작게 튀어나온 부분 모델링할 때 폴리곤 엉킴이 있어서 질문드립니다. 모델링할 페이스 선택 > inset > extrude > bevel 똑같이 진행한 것 같은데 섭디모디를 켜면 사진과 같이 미묘하게 겹친 것처럼 됩니다. 노말 안쪽에서 보면 두번째 느낌인데 섭디모디가 입구부분을 동그랗게 만들어서 베벨이 된 엣지라인과 충돌하는 것 같습니다... 왜 저런질 모르겠구요 정답 아는 고수 있으실까요

  • blender
  • 3d-modelling
  • blender
피오나 댓글 1 좋아요 0 조회수 690

교재문의드립니다.

미해결

Blender(블렌더) 3.0 3D 그래픽의 입문 Part. 2

안녕하세요... 아래 강의를 듣고 있는데요.. 현재 강의내용을 대략적으로 반영한 교재가 있는지 궁금합니다. 제가 검색해 본 교재들은 모두 기본 이론(블렌더 기본조작방법)을 간단히만 소개하고, 예제만들어보는 데 지면을 많이 활용해서 실제 전체적인 블렌더 기본조작방법을 배우기 어렵습니다. 그래서 현재 강의 내용을 요약식이라도 반영한 교재나 자료가 있으면 구하고 싶습니다. Blender(블렌더) 3.0 3D 그래픽의 입문 Part. 2

  • blender
  • 3d-modelling
  • blender
doll9415 댓글 0 좋아요 0 조회수 354

저번에 이어 질문드립니다.

미해결

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를 업데이트 해도 변하지가 않습니다. 혹시 해당부분을 해결할 방법이 있나요?

  • blender
  • 인터랙티브-웹
  • 인터랙티브-웹
  • three.js
  • Three.js
이현선 댓글 1 좋아요 0 조회수 419

이번 강의에 필요한 사람 모델링 파일은

미해결

Blender(블렌더) 3.0 3D 그래픽의 입문 Part. 3

구글에 blender free man modeling 이라고 치면 무료사이트 나오는데 거기서 받아서 했습니다. 이전 강의까진 기본도형 변형해서 따라 했는데 이번 강의는 사람 파일이 있어야해서 당황했네요.;; 찾아보니까 obj파일 바로 나와서 그거 다운받아 임포트해 따라 했습니다. 혹시 필요하신 분은 아래 주소에서 받으시면 될 것 같습니다. [ https://free3d.com/3d-model/male-base-mesh-6682.html ] 이메일로 가입 필요

  • blender
  • blender
  • 3d-modelling
  • 3d-modelling
보요 댓글 2 좋아요 0 조회수 583

자동완성

미해결

Three.js로 시작하는 3D 인터랙티브 웹

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

  • blender
  • 인터랙티브-웹
  • three.js
  • 인터랙티브-웹
  • Three.js
김정원 댓글 1 좋아요 0 조회수 468

질문 있습니다

미해결

Three.js로 시작하는 3D 인터랙티브 웹

일분코딩님처럼 영상이 나오게 하고 싶은데 texture를 비디오로 불러와서 mapping한 것 같은데 어떻게 하신 것인지 궁금합니다. VideoTexture를 사용하신 것일까요? 그리고 홈페이지 임베디드 같은 경우에는 어떤 방식을 사용하면 가능한지도 궁금합니다

  • blender
  • 인터랙티브-웹
  • 인터랙티브-웹
  • blender
  • three.js
  • Three.js
주영 댓글 1 좋아요 0 조회수 422

Smoke Shader 텍스처 관련 질문드립니다.

미해결

[LV2] 이펙터로 취업하기 위한 포트폴리오 만들기

안녕하세요, 원띵님! 좋은 강의 감사합니다! Smoke Shader#1 강의를 듣던 도중 4:49에 나오는 UV 텍스처 만드는 방법을 모르겠습니다... 혹시 해당 텍스처를 만드는 방법이 있을까요?

  • unreal-engine
  • blender
  • unreal
  • vfx
robot9740 댓글 0 좋아요 0 조회수 504

apply 후 전체선택

미해결

Three.js로 시작하는 3D 인터랙티브 웹

apply 후 edit mode 에서 전체선택을 했는데, 캡쳐화면처럼 부분 부분 선택이 되고 한번에 전체 선택이 되지 않습니다. 제가 제대로 따라하고 있는 게 맞나요?

  • blender
  • 인터랙티브-웹
  • three.js
  • 인터랙티브-웹
  • Three.js
박영현 댓글 1 좋아요 0 조회수 452

7강 질문있습니다

미해결

블렌더 파이썬 BPY 입문강의

__init__.py 파일에서 import bpy를 상단에 입력하지 않았는데 어떤 원리로 register 와 unregister 함수가 작동하는지 질문드립니다. 감사합니다.

  • blender
popear 댓글 0 좋아요 0 조회수 392

질문드립니다

미해결

Three.js로 시작하는 3D 인터랙티브 웹

안녕하세요 강의 너무 재밌게 잘 수강하고 있습니다. 일분이 캐릭터 위에 이것처럼 이름을 띄우고 싶은데 어떤 방식으로 해야할 지 막막해서 여쭤봅니다.

  • 인터랙티브-웹
  • 인터랙티브-웹
  • three.js
  • blender
  • Three.js
주영 댓글 1 좋아요 0 조회수 916

OrbitControls가 VS code Live Server에서는 동작을 안합니다

미해결

Three.js로 시작하는 3D 인터랙티브 웹

씬,카메라, 조명, 지오메트리등등 모두 문제없이 생성되는데 OrbitControls를 임포트하면 vs code live server에선 구동을 안합니다 왜 그런가요? 콘솔창에서는 딱히 경고 메세지는 뜨지 않습니다. npm start로 서버를 구동하는것과 vs code 플러그인 live server에서 파일을 여는것과 어떤 차이가 있나요?

  • orbitcontrols
  • blender
  • liveserver
  • 인터랙티브-웹
  • Three.js
윤희정 댓글 2 좋아요 0 조회수 701

5강 Global & Local의 20:02 에서 기즈모 (영상 다시 보면서 질문 해결 됐슴당)

미해결

Blender(블렌더) 3.0 3D 그래픽의 입문 Part. 1

20분 2초 구간에서 오브젝트의 기즈모가 바로 보이는데, 3강에서 알려주셨던 것처럼 뷰포트 기즈모 드롭다운 메뉴의 Object Gizmos의 체크박스를 체크한 것이 영상에서는 빠진 걸로 영상이 편집된 건가요? 아니면 단축키가 있어서 바로 오브젝트의 기즈모가 보이도록 변경하신 건가요? 단축키가 있는 거라면 알고 싶어서 질문했습니다.

  • blender
  • 3d-modelling
Passionate Learner 댓글 1 좋아요 0 조회수 786

이미터의 color 모듈을 검은색으로 수정시 투명하게 나오는 문제

미해결

[LV1] 왕초보 이펙트 (VFX) 기초부터 튼튼하게! (UE5, Blender)

안녕하세요 원띵님! 답변 정말 감사했습니다. 덕분에 문제를 해결할 수 있었습니다 ^^! 이번에도 강의와 다르게 만들어지는 문제가 발생하여 질문을 드립니다. 강의에서 Color모듈 → 검은색으로 변경 하셔서 똑같이 값을 변경 하였는데 위 사진처럼 투명하게 나오는 문제가 발생하였습니다. 이미터는 이렇게 설정하였습니다. 그리고 다른 문제이지만 파티클이 잔상처럼 남는 문제도 있어서 뷰포트 상의 옵션 문제인지, 컴퓨터의 옵션문제인지도 궁금합니다. 감사합니다.

  • blender
  • unreal
  • vfx
study.sungho85 댓글 2 좋아요 0 조회수 772

three-to-cannon 라이브러리 추천합니다.

미해결

Three.js로 시작하는 3D 인터랙티브 웹

- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :) - 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다. - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요! 좋은 강의와 커뮤니티를 통한 서포트 덕분에 배운 내용 잘 활용하고 있습니다. 실제로 three.js 작업을 하게 되면 gltf 와 같이 이미 작업되어 있는 메쉬를 많이 사용하게 되는데 여기에 물리엔진을 넣기 위해 cannon body를 만드는 일이 굉장히 번거롭습니다. 저는 three-to-cannon 이라는 라이브러리를 사용해 메쉬를 cannon이 사용하는 shape으로 변환하고 있습니다. 여러 최적화 옵션도 있고 물리엔진을 적용하는 프로젝트에 사용해보시면 좋을 거 같습니다.

  • 인터랙티브-웹
  • blender
  • Three.js
hyshim5 댓글 2 좋아요 2 조회수 529

인기 태그

인프런 TOP Writers

주간 인기글