본문 바로가기
javascript/interaction

[threejs] 3D도형 추가 (+반응형)

글: moondinsk 2024. 7. 23.

3D도형을 맨드러보자

https://threejs.org/docs/index.html#manual/en/introduction/Drawing-lines

 

geometry 도형과  https://threejs.org/docs/index.html?q=geome#api/en/geometries/BoxGeometry

material 재질 생성 후  https://threejs.org/docs/index.html?q=material#api/en/materials/MeshStandardMaterial

cube 로 생성!

-검색창에 geometry, material 검색하면 다양한 도형과 재질, 그리고 사용가능한 옵션값이 상세하게 나온다.

 

 

반응형처리

  // 반응형 처리
  function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;   
    camera.updateProjectionMatrix();                          // 종횡비 세팅
    renderer.setSize(window.innerWidth, window.innerHeight);  // 렌더러 세팅 
  }

  window.addEventListener('resize', onWindowResize);