inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

물리엔진 사용

488

ajalth

작성한 질문수 1

0

현재 모듈형으로 진행해오고 있었는데

cannon-es.js의 경우 npm으로만 연결이 가능한건가요..?ㅠ

blender 인터랙티브-웹 three.js

답변 2

0

1분코딩

npm 으로 다운로드를 받으신 후에 직접 js 파일을 연결하려면,
node_modules/cannon-es/dist/ 폴더에 파일이 있으니 그 파일을 활용하시면 됩니다~

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴이에요. 물리엔진을 사용하려고 하시는군요!

cannon-es.js는 npm으로 설치하여 사용할 수 있는 물리엔진 라이브러리입니다. 따라서, npm을 통해 해당 라이브러리를 프로젝트에 연결하는 것이 일반적인 방법이에요. npm은 Node.js의 패키지 관리자로서, 다양한 라이브러리와 모듈을 쉽게 설치하고 사용할 수 있도록 도와주는 도구입니다.

cannon-es.js를 사용하는 방법은 다음과 같아요:
1. 프로젝트 폴더에서 터미널을 열어 npm을 실행합니다.
2. 아래의 명령어로 cannon-es.js를 설치합니다.

   npm install cannon-es
  1. 설치가 완료되면 JavaScript 파일 내에서 cannon-es를 import하여 사용할 수 있어요.
    예를 들어, 아래와 같이 사용할 수 있습니다.
    
    import * as CANNON from 'cannon-es';
    const world = new CANNON.World();
    // 물리 시뮬레이션 코드 작성
    

위의 방법대로 cannon-es.js를 연결하고 사용하시면 될 것 같아요. 추가적인 도움이 필요하다면, 물리엔진과 관련된 문서나 예제를 참고해보시는 것도 도움이 될 수 있을 거예요. 좋은 결과 있기를 바라요!

box3.position.x 위치

0

38

1

리액트/next.js와 같이 사용하는 강의 계획은 없으신가요?

0

80

1

소스코드 파일이 강의랑 같나요?

0

118

2

materials 배열에 있는 top, bottom ... 들에 대해서

0

118

0

gltf 포맷 사용

0

243

1

점프 애니메이션 stop

0

127

2

사양에 따른 다른 결과

0

112

1

중복 질문 삭제

0

160

1

혹시 이 빛의 범위를 조절할 수 있는 방법이 있나요?

0

124

1

gltf.scene.children 이 없는데도 모델이 화면에 떠요

0

101

2

GLF파일 export한 후에 three.js에서 렌더링 된 모델에는 텍스처 적용이 안되어있습니다..!

0

160

1

일반 유리, 강화 유리 강의에서 Glass 객체의 position X를 -1, 1로 설정한 이유를 모르겠어요

0

77

0

그림자가 다르게 표현됩니다

0

138

1

setAnimationLoop 위치가...

0

99

1

얼굴 그릴 때 붓이 깔끔하게 칠해지지 않고 얼룩덜룩해요

0

135

1

블렌더 texture paint 시 미러모드

0

163

0

DragControls의 인자값을 바꾸지 않았는데 에러가 안떠요!

0

104

1

blender 에서 색칠하기 편 Texter paint slot추가없음

0

966

2

fin 버전도 그냥 실행이 안돼요

0

289

2

자바스크립트 실행이 안되는 것 같아요

0

379

1

모니터 해상도에 따라 mesh의 크기가 변할 수 있나요?

0

238

1

live server와 localhost:8080

0

345

1

material에 canvas 를 texture 로 넣는방법이 궁금해요

0

270

1

모바일 조이스틱은 어떻게 만들 수 있을까요?

0

208

1